loading_screen 0.1.2 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +7 -0
- data/CONTRIBUTORS.md +8 -0
- data/README.md +12 -3
- data/app/helpers/loading_screen/loading_screen_helper.rb +37 -4
- data/lib/loading_screen/exceptions.rb +7 -0
- data/lib/loading_screen.rb +1 -0
- data/loading_screen.gemspec +2 -2
- data/vendor/assets/javascripts/loading_screen.js +19 -11
- data/vendor/assets/stylesheets/loading_screen-default.css +31 -0
- data/vendor/assets/stylesheets/loading_screen-double_bounce.css +32 -0
- data/vendor/assets/stylesheets/loading_screen.css +15 -33
- metadata +7 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: a32c306ec19b16373d852dde3a0855ec4b8ae044
|
4
|
+
data.tar.gz: eb8c2b1160b2ff97146020593752244ec39d9150
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 05a08482e0cd0a4dd4abdb04594f45d2acb639bb588cd6349e430e92b801cb30b072d9c258fc53c8899b247a59116f291cb324fce647d0f4557bee0956f743a1
|
7
|
+
data.tar.gz: a0379f6b0c4e6e5b220e77f2450fad95e971fd856f24ca4a0873243bd23e2780e853050733f8386e2a3e53858522998a29ec8c125e709d97a697d6849daae1c5
|
data/CHANGELOG.md
CHANGED
data/CONTRIBUTORS.md
CHANGED
@@ -11,5 +11,13 @@ Nodeunit contributors (sorted alphabetically)
|
|
11
11
|
* Documentation building
|
12
12
|
* Code reviewer
|
13
13
|
|
14
|
+
* **[Swakhar Dey](https://github.com/Swakhar)**
|
15
|
+
|
16
|
+
* Css design
|
17
|
+
* Animations designing with css
|
18
|
+
* Code reviewer
|
19
|
+
|
20
|
+
|
21
|
+
|
14
22
|
**[Full contributors list](https://github.com/mujadded/loading_screen/contributors).**
|
15
23
|
|
data/README.md
CHANGED
@@ -35,13 +35,22 @@ After that add this line in application.css
|
|
35
35
|
```
|
36
36
|
*= require loading_screen
|
37
37
|
```
|
38
|
-
|
39
|
-
We are all set,
|
38
|
+
### Using available CSS animations
|
39
|
+
We are all set, to use it with default `rotating_square` animation in any view file ( for e.g.: index.html.erb) just add:
|
40
40
|
```
|
41
41
|
<%= loading_screen %>
|
42
42
|
```
|
43
43
|
|
44
|
-
|
44
|
+
There are also other loading animation available for you to choose from, like:
|
45
|
+
|
46
|
+
```
|
47
|
+
<%= loading_screen style: :double_bounce %>
|
48
|
+
```
|
49
|
+
Other animations will be available shortly...
|
50
|
+
|
51
|
+
### Using custom gif images
|
52
|
+
|
53
|
+
if you want to add custom gif as the loading screen just download a gif and put it inside the `assets/images/` and add:
|
45
54
|
```
|
46
55
|
<%= loading_screen gif: 'your gif file name witout ".gif" ' %>
|
47
56
|
```
|
@@ -1,14 +1,47 @@
|
|
1
1
|
module LoadingScreen::LoadingScreenHelper
|
2
2
|
|
3
3
|
def loading_screen(options={})
|
4
|
+
options[:style] = :default unless options[:style].present?
|
5
|
+
|
4
6
|
content_tag :div, '', class: 'loading_screen-spinner' do
|
5
7
|
if options[:gif].present?
|
6
|
-
|
7
|
-
|
8
|
-
|
8
|
+
gif_handler options
|
9
|
+
else
|
10
|
+
css_handler options
|
11
|
+
end
|
12
|
+
end
|
13
|
+
end
|
14
|
+
|
15
|
+
private
|
16
|
+
|
17
|
+
def gif_handler(options)
|
18
|
+
content_tag :div, '', class: 'loading_screen-gif' do
|
19
|
+
image_tag(options[:gif])
|
20
|
+
end
|
21
|
+
rescue Sprockets::Rails::Helper::AssetNotFound => e
|
22
|
+
raise LoadingScreen::InvalidOptionError.new "'#{options[:gif]}' file does not exist"
|
23
|
+
end
|
24
|
+
|
25
|
+
def css_handler(options)
|
26
|
+
content_tag :div, '', class: 'loading_screen-css' do
|
27
|
+
if options[:style] == :double_bounce
|
28
|
+
load_double_bounce
|
29
|
+
elsif options[:style] == :default
|
30
|
+
load_rotate_square
|
9
31
|
else
|
10
|
-
|
32
|
+
raise LoadingScreen::InvalidOptionError.new "Wrong style name: '#{options[:style]}'"
|
11
33
|
end
|
12
34
|
end
|
13
35
|
end
|
36
|
+
|
37
|
+
def load_double_bounce
|
38
|
+
[].tap do |array|
|
39
|
+
array << content_tag(:div, '', id: 'loading_screen-double_bounce1')
|
40
|
+
array << content_tag(:div, '', id: 'loading_screen-double_bounce2')
|
41
|
+
end.join.html_safe
|
42
|
+
end
|
43
|
+
|
44
|
+
def load_rotate_square
|
45
|
+
content_tag :div, '', id: 'loading_screen-rotating-square'
|
46
|
+
end
|
14
47
|
end
|
data/lib/loading_screen.rb
CHANGED
data/loading_screen.gemspec
CHANGED
@@ -4,12 +4,12 @@ require "loading_screen/version"
|
|
4
4
|
|
5
5
|
Gem::Specification.new do |spec|
|
6
6
|
spec.name = "loading_screen"
|
7
|
-
spec.version = '0.
|
7
|
+
spec.version = '0.2.0'
|
8
8
|
spec.authors = ["Mujadded Al Rabbani Alif", "Yearsin Ar Rahman", "Swakhar Dey"]
|
9
9
|
spec.email = ["Mujadded.alif@gmail.com"]
|
10
10
|
|
11
11
|
spec.summary = "Loading screen for time-consuming background task"
|
12
|
-
spec.description = "It loads up a animation until the full page is loaded in the browser.
|
12
|
+
spec.description = "It loads up a animation until the full page is loaded in the browser. It can load provided css animation and you can also add custom gif to show in the loading screen"
|
13
13
|
spec.homepage = "https://github.com/Mujadded/loading_screen"
|
14
14
|
spec.license = "MIT"
|
15
15
|
|
@@ -1,16 +1,24 @@
|
|
1
|
-
$(
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
// show spinner on AJAX start
|
7
|
-
$(document).ajaxStart(function(){
|
8
|
-
$(".loading_screen-spinner").show();
|
1
|
+
$(document).ready(function(){
|
2
|
+
$(document).keyup(function(e) {
|
3
|
+
if (e.keyCode == 27) { // escape key maps to keycode `27`
|
4
|
+
$(".loading_screen-spinner").fadeOut();
|
5
|
+
}
|
9
6
|
});
|
10
7
|
|
11
|
-
|
12
|
-
|
8
|
+
$( window ).bind('load',function() {
|
9
|
+
|
10
|
+
// hide spinner
|
13
11
|
$(".loading_screen-spinner").fadeOut();
|
14
|
-
});
|
15
12
|
|
13
|
+
// show spinner on AJAX start
|
14
|
+
$(document).ajaxStart(function(){
|
15
|
+
$(".loading_screen-spinner").show();
|
16
|
+
});
|
17
|
+
|
18
|
+
// hide spinner on AJAX stop
|
19
|
+
$(document).ajaxStop(function(){
|
20
|
+
$(".loading_screen-spinner").fadeOut();
|
21
|
+
});
|
22
|
+
|
23
|
+
});
|
16
24
|
});
|
@@ -0,0 +1,31 @@
|
|
1
|
+
#loading_screen-rotating-square {
|
2
|
+
width: 100%;
|
3
|
+
height: 100%;
|
4
|
+
background-color: orange;
|
5
|
+
|
6
|
+
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
|
7
|
+
animation: sk-rotateplane 1.2s infinite ease-in-out;
|
8
|
+
}
|
9
|
+
|
10
|
+
@-webkit-keyframes sk-rotateplane {
|
11
|
+
0% { -webkit-transform: perspective(120px) }
|
12
|
+
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
|
13
|
+
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
|
14
|
+
}
|
15
|
+
|
16
|
+
@keyframes sk-rotateplane {
|
17
|
+
0% {
|
18
|
+
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
19
|
+
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
20
|
+
}
|
21
|
+
|
22
|
+
50% {
|
23
|
+
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
24
|
+
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
25
|
+
}
|
26
|
+
|
27
|
+
100% {
|
28
|
+
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
29
|
+
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
30
|
+
}
|
31
|
+
}
|
@@ -0,0 +1,32 @@
|
|
1
|
+
#loading_screen-double_bounce1, #loading_screen-double_bounce2 {
|
2
|
+
width: 100%;
|
3
|
+
height: 100%;
|
4
|
+
border-radius: 50%;
|
5
|
+
background-color: orange;
|
6
|
+
opacity: 0.6;
|
7
|
+
position: fixed;
|
8
|
+
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
|
9
|
+
animation: sk-bounce 2.0s infinite ease-in-out;
|
10
|
+
}
|
11
|
+
|
12
|
+
#loading_screen-double_bounce2 {
|
13
|
+
-webkit-animation-delay: -1.0s;
|
14
|
+
animation-delay: -1.0s;
|
15
|
+
}
|
16
|
+
|
17
|
+
@-webkit-keyframes sk-bounce {
|
18
|
+
0%, 100% { -webkit-transform: scale(0.0) }
|
19
|
+
50% { -webkit-transform: scale(1.0) }
|
20
|
+
}
|
21
|
+
|
22
|
+
@keyframes sk-bounce {
|
23
|
+
0%, 100% {
|
24
|
+
transform: scale(0.0);
|
25
|
+
-webkit-transform: scale(0.0);
|
26
|
+
}
|
27
|
+
|
28
|
+
50% {
|
29
|
+
transform: scale(1.0);
|
30
|
+
-webkit-transform: scale(1.0);
|
31
|
+
}
|
32
|
+
}
|
@@ -1,42 +1,24 @@
|
|
1
|
-
|
1
|
+
@import url("loading_screen-default.css");
|
2
|
+
@import url("loading_screen-double_bounce.css");
|
3
|
+
|
4
|
+
.loading_screen-spinner {
|
2
5
|
position: fixed;
|
3
|
-
left:
|
4
|
-
top:
|
6
|
+
left: 0;
|
7
|
+
top: 0;
|
5
8
|
width: 100%;
|
6
9
|
height: 100%;
|
7
10
|
z-index: 9999;
|
8
11
|
background: rgb(249,249,249);
|
9
12
|
}
|
10
|
-
.loading_screen-spinner > div:first-child{
|
11
|
-
position: absolute;
|
12
|
-
top:40%;
|
13
|
-
left:45%;
|
14
|
-
}
|
15
13
|
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
|
22
|
-
animation: sk-rotateplane 1.2s infinite ease-in-out;
|
23
|
-
}
|
24
|
-
|
25
|
-
@-webkit-keyframes sk-rotateplane {
|
26
|
-
0% { -webkit-transform: perspective(120px) }
|
27
|
-
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
|
28
|
-
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
|
14
|
+
.loading_screen-spinner > div {
|
15
|
+
position: fixed;
|
16
|
+
top:50%;
|
17
|
+
left:50%;
|
18
|
+
transform: translate(-50%,-50%);
|
29
19
|
}
|
30
20
|
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
} 50% {
|
36
|
-
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
37
|
-
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
|
38
|
-
} 100% {
|
39
|
-
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
40
|
-
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
41
|
-
}
|
42
|
-
}
|
21
|
+
.loading_screen-css {
|
22
|
+
height:90px;
|
23
|
+
width: 90px;
|
24
|
+
}
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: loading_screen
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.2.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Mujadded Al Rabbani Alif
|
@@ -10,7 +10,7 @@ authors:
|
|
10
10
|
autorequire:
|
11
11
|
bindir: exe
|
12
12
|
cert_chain: []
|
13
|
-
date: 2018-01-
|
13
|
+
date: 2018-01-28 00:00:00.000000000 Z
|
14
14
|
dependencies:
|
15
15
|
- !ruby/object:Gem::Dependency
|
16
16
|
name: bundler
|
@@ -75,8 +75,8 @@ dependencies:
|
|
75
75
|
- !ruby/object:Gem::Version
|
76
76
|
version: 4.3.1
|
77
77
|
description: It loads up a animation until the full page is loaded in the browser.
|
78
|
-
|
79
|
-
screen
|
78
|
+
It can load provided css animation and you can also add custom gif to show in the
|
79
|
+
loading screen
|
80
80
|
email:
|
81
81
|
- Mujadded.alif@gmail.com
|
82
82
|
executables: []
|
@@ -94,10 +94,13 @@ files:
|
|
94
94
|
- app/helpers/loading_screen/loading_screen_helper.rb
|
95
95
|
- lib/loading_screen.rb
|
96
96
|
- lib/loading_screen/engine.rb
|
97
|
+
- lib/loading_screen/exceptions.rb
|
97
98
|
- lib/loading_screen/version.rb
|
98
99
|
- loading_screen.gemspec
|
99
100
|
- vendor/assets/images/.keep
|
100
101
|
- vendor/assets/javascripts/loading_screen.js
|
102
|
+
- vendor/assets/stylesheets/loading_screen-default.css
|
103
|
+
- vendor/assets/stylesheets/loading_screen-double_bounce.css
|
101
104
|
- vendor/assets/stylesheets/loading_screen.css
|
102
105
|
homepage: https://github.com/Mujadded/loading_screen
|
103
106
|
licenses:
|