loading_screen 0.2.1 → 0.2.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +23 -8
- data/app/helpers/loading_screen/loading_screen_helper.rb +28 -29
- data/lib/loading_screen/version.rb +1 -1
- data/loading_screen.gemspec +1 -1
- data/vendor/assets/stylesheets/loading_screen-default.css +3 -4
- data/vendor/assets/stylesheets/loading_screen-double-bounce.css +3 -3
- data/vendor/assets/stylesheets/loading_screen-grid-cube.css +59 -0
- data/vendor/assets/stylesheets/loading_screen-rectangle-bounce.css +15 -8
- data/vendor/assets/stylesheets/loading_screen-wandering-cubes.css +43 -0
- data/vendor/assets/stylesheets/loading_screen.css +3 -6
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 3e512b0af0850a8741975f0ac446ebb7e2805351
|
|
4
|
+
data.tar.gz: b928a3655ba5aa698683c692dee7e8d2a81645fb
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: f76db2e0a1b69e115130a0d4f2be1cdaf56f2631dfc2f9f440cfb436187875f6cfdf6542a58fb144d202816b414cb6e048aa1f310ff83d96c5044e03d36c945a
|
|
7
|
+
data.tar.gz: f58da1d6027e086d41aa2fe1c59af14f31262ea3bd2be110a28ebb3deb8ea86cac18afc66e18f59e704244732479802f9c3125c47db084234fd45a6253759d01
|
data/README.md
CHANGED
|
@@ -40,8 +40,12 @@ We are all set, to use it with default `rotating_square` animation in any view f
|
|
|
40
40
|
```
|
|
41
41
|
<%= loading_screen %>
|
|
42
42
|
```
|
|
43
|
+
or
|
|
44
|
+
```
|
|
45
|
+
<%= loading_screen style: :default %>
|
|
46
|
+
```
|
|
43
47
|
|
|
44
|
-
There are also other loading animation available for you to choose from, like:
|
|
48
|
+
There are also other loading animation available for you to choose from just add `style` option, like:
|
|
45
49
|
|
|
46
50
|
```
|
|
47
51
|
<%= loading_screen style: :double_bounce %>
|
|
@@ -51,22 +55,33 @@ There are also other loading animation available for you to choose from, like:
|
|
|
51
55
|
<%= loading_screen style: :rectangle_bounce %>
|
|
52
56
|
```
|
|
53
57
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
58
|
+
```
|
|
59
|
+
<%= loading_screen style: :wandering_cubes %>
|
|
60
|
+
```
|
|
57
61
|
|
|
58
62
|
```
|
|
59
|
-
<%= loading_screen style: :
|
|
63
|
+
<%= loading_screen style: :cube_grid %>
|
|
60
64
|
```
|
|
61
|
-
|
|
65
|
+
|
|
66
|
+
Other animations will be available shortly...
|
|
62
67
|
|
|
63
68
|
### Using custom gif images
|
|
64
69
|
|
|
65
|
-
if you want to add custom gif as the loading screen just download a gif and put it inside the `assets/images/` and add:
|
|
70
|
+
if you want to add custom gif as the loading screen just download a gif and put it inside the `assets/images/` and add `gif` option:
|
|
66
71
|
```
|
|
67
72
|
<%= loading_screen gif: 'your gif file name witout ".gif" ' %>
|
|
68
73
|
```
|
|
69
|
-
And you are done. Enjoy
|
|
74
|
+
And you are done. Enjoy
|
|
75
|
+
|
|
76
|
+
### Using custom colors
|
|
77
|
+
|
|
78
|
+
You can change the background color and the loader color ( color for only css animation loader, gif's color depends on the image ) by adding `background` option and `color` option:
|
|
79
|
+
|
|
80
|
+
```
|
|
81
|
+
<%= loading_screen color: 'red', background: 'green' %>
|
|
82
|
+
```
|
|
83
|
+
Color format like `hash`, `rgb`, `rgba`, etc all css color format are acceptable
|
|
84
|
+
|
|
70
85
|
## Development
|
|
71
86
|
|
|
72
87
|
Currently only fullscreen loading animation is supported. `Div` based loading animation feature will be added soon.
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
module LoadingScreen::LoadingScreenHelper
|
|
2
2
|
|
|
3
|
+
@background = nil
|
|
4
|
+
@color = nil
|
|
5
|
+
|
|
3
6
|
def loading_screen(options={})
|
|
4
7
|
options[:style] = :default unless options[:style]
|
|
5
|
-
|
|
6
|
-
|
|
8
|
+
@background = 'background-color: ' + options[:background] if options[:background]
|
|
9
|
+
@color = 'background-color: ' + options[:color] if options[:color]
|
|
10
|
+
content_tag :div, '', class: 'loading_screen-spinner', style: @background do
|
|
7
11
|
if options[:gif].present?
|
|
8
12
|
gif_handler options
|
|
9
13
|
else
|
|
@@ -23,38 +27,33 @@ module LoadingScreen::LoadingScreenHelper
|
|
|
23
27
|
end
|
|
24
28
|
|
|
25
29
|
def css_handler(options)
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
30
|
+
case options[:style]
|
|
31
|
+
when :double_bounce
|
|
32
|
+
multiple_div_content 2, 'loading_screen-double-bounce'
|
|
33
|
+
when :rectangle_bounce
|
|
34
|
+
content_tag :div, '', class: 'loading_screen-rect' do
|
|
35
|
+
multiple_div_content 5, 'loading_screen-rect'
|
|
36
|
+
end
|
|
37
|
+
when :wandering_cubes
|
|
38
|
+
content_tag :div, '', class: 'loading_screen-cube' do
|
|
39
|
+
multiple_div_content 2, 'loading_screen-cube'
|
|
36
40
|
end
|
|
41
|
+
when :cube_grid
|
|
42
|
+
content_tag :div, '', class: 'loading_screen-grid-cube' do
|
|
43
|
+
multiple_div_content 9, 'loading_screen-grid-cube'
|
|
44
|
+
end
|
|
45
|
+
when :default
|
|
46
|
+
content_tag :div, '', id: 'loading_screen-rotating-square', style: @color
|
|
47
|
+
else
|
|
48
|
+
raise LoadingScreen::InvalidOptionError.new "Wrong style name: '#{options[:style]}'"
|
|
37
49
|
end
|
|
38
50
|
end
|
|
39
51
|
|
|
40
|
-
def
|
|
52
|
+
def multiple_div_content(number_of_div, id_name)
|
|
41
53
|
[].tap do |array|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
end
|
|
46
|
-
|
|
47
|
-
def load_rotate_square(color)
|
|
48
|
-
content_tag :div, '', id: 'loading_screen-rotating-square' , style: color
|
|
49
|
-
end
|
|
50
|
-
|
|
51
|
-
def load_rectangle_bounce(color)
|
|
52
|
-
[].tap do |array|
|
|
53
|
-
array << content_tag(:div, '', id: 'loading_screen-rect1', style: color)
|
|
54
|
-
array << content_tag(:div, '', id: 'loading_screen-rect2', style: color)
|
|
55
|
-
array << content_tag(:div, '', id: 'loading_screen-rect3', style: color)
|
|
56
|
-
array << content_tag(:div, '', id: 'loading_screen-rect4', style: color)
|
|
57
|
-
array << content_tag(:div, '', id: 'loading_screen-rect5', style: color)
|
|
54
|
+
number_of_div.times do |i|
|
|
55
|
+
array << content_tag(:div, '', id: "#{id_name}#{i + 1}", style: @color)
|
|
56
|
+
end
|
|
58
57
|
end.join.html_safe
|
|
59
58
|
end
|
|
60
59
|
end
|
data/loading_screen.gemspec
CHANGED
|
@@ -4,7 +4,7 @@ require "loading_screen/version"
|
|
|
4
4
|
|
|
5
5
|
Gem::Specification.new do |spec|
|
|
6
6
|
spec.name = "loading_screen"
|
|
7
|
-
spec.version =
|
|
7
|
+
spec.version = LoadingScreen::VERSION
|
|
8
8
|
spec.authors = ["Mujadded Al Rabbani Alif", "Yearsin Ar Rahman", "Swakhar Dey"]
|
|
9
9
|
spec.email = ["Mujadded.alif@gmail.com"]
|
|
10
10
|
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
#loading_screen-rotating-square {
|
|
2
|
-
width:
|
|
3
|
-
height:
|
|
4
|
-
background-color:
|
|
5
|
-
|
|
2
|
+
width: 80px;
|
|
3
|
+
height: 80px;
|
|
4
|
+
background-color:orange;
|
|
6
5
|
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
|
|
7
6
|
animation: sk-rotateplane 1.2s infinite ease-in-out;
|
|
8
7
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
#loading_screen-double-bounce1, #loading_screen-double-bounce2 {
|
|
2
|
-
width:
|
|
3
|
-
height:
|
|
4
|
-
border-radius: 50%;
|
|
2
|
+
width: 80px;
|
|
3
|
+
height: 80px;
|
|
5
4
|
background-color: orange;
|
|
5
|
+
border-radius: 50%;
|
|
6
6
|
opacity: 0.6;
|
|
7
7
|
position: fixed;
|
|
8
8
|
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
.loading_screen-grid-cube {
|
|
2
|
+
width: 80px;
|
|
3
|
+
height: 80px;
|
|
4
|
+
}
|
|
5
|
+
.loading_screen-grid-cube > div {
|
|
6
|
+
width: 33%;
|
|
7
|
+
height: 33%;
|
|
8
|
+
background-color: orange;
|
|
9
|
+
float: left;
|
|
10
|
+
-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
|
|
11
|
+
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
|
|
12
|
+
}
|
|
13
|
+
#loading_screen-grid-cube1 {
|
|
14
|
+
-webkit-animation-delay: 0.2s;
|
|
15
|
+
animation-delay: 0.2s; }
|
|
16
|
+
#loading_screen-grid-cube2 {
|
|
17
|
+
-webkit-animation-delay: 0.3s;
|
|
18
|
+
animation-delay: 0.3s; }
|
|
19
|
+
#loading_screen-grid-cube3 {
|
|
20
|
+
-webkit-animation-delay: 0.4s;
|
|
21
|
+
animation-delay: 0.4s; }
|
|
22
|
+
#loading_screen-grid-cube4 {
|
|
23
|
+
-webkit-animation-delay: 0.1s;
|
|
24
|
+
animation-delay: 0.1s; }
|
|
25
|
+
#loading_screen-grid-cube5 {
|
|
26
|
+
-webkit-animation-delay: 0.2s;
|
|
27
|
+
animation-delay: 0.2s; }
|
|
28
|
+
#loading_screen-grid-cube6 {
|
|
29
|
+
-webkit-animation-delay: 0.3s;
|
|
30
|
+
animation-delay: 0.3s; }
|
|
31
|
+
#loading_screen-grid-cube7 {
|
|
32
|
+
-webkit-animation-delay: 0s;
|
|
33
|
+
animation-delay: 0s; }
|
|
34
|
+
#loading_screen-grid-cube8 {
|
|
35
|
+
-webkit-animation-delay: 0.1s;
|
|
36
|
+
animation-delay: 0.1s; }
|
|
37
|
+
#loading_screen-grid-cube9 {
|
|
38
|
+
-webkit-animation-delay: 0.2s;
|
|
39
|
+
animation-delay: 0.2s; }
|
|
40
|
+
|
|
41
|
+
@-webkit-keyframes sk-cubeGridScaleDelay {
|
|
42
|
+
0%, 70%, 100% {
|
|
43
|
+
-webkit-transform: scale3D(1, 1, 1);
|
|
44
|
+
transform: scale3D(1, 1, 1);
|
|
45
|
+
} 35% {
|
|
46
|
+
-webkit-transform: scale3D(0, 0, 1);
|
|
47
|
+
transform: scale3D(0, 0, 1);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@keyframes sk-cubeGridScaleDelay {
|
|
52
|
+
0%, 70%, 100% {
|
|
53
|
+
-webkit-transform: scale3D(1, 1, 1);
|
|
54
|
+
transform: scale3D(1, 1, 1);
|
|
55
|
+
} 35% {
|
|
56
|
+
-webkit-transform: scale3D(0, 0, 1);
|
|
57
|
+
transform: scale3D(0, 0, 1);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
@@ -1,29 +1,36 @@
|
|
|
1
|
-
.loading_screen-
|
|
1
|
+
.loading_screen-rect {
|
|
2
|
+
width: 50px;
|
|
3
|
+
height: 100px;
|
|
4
|
+
text-align: center;
|
|
5
|
+
font-size: 10px;
|
|
6
|
+
|
|
7
|
+
}
|
|
8
|
+
.loading_screen-rect > div{
|
|
2
9
|
background-color: orange;
|
|
3
|
-
|
|
10
|
+
margin-left: 2px;
|
|
11
|
+
height: 100%;
|
|
4
12
|
width: 6px;
|
|
5
13
|
display: inline-block;
|
|
6
|
-
|
|
14
|
+
|
|
7
15
|
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
|
|
8
16
|
animation: sk-stretchdelay 1.2s infinite ease-in-out;
|
|
9
17
|
}
|
|
10
|
-
|
|
11
|
-
.loading_screen-css #loading_screen-rect2 {
|
|
18
|
+
#loading_screen-rect2 {
|
|
12
19
|
-webkit-animation-delay: -1.1s;
|
|
13
20
|
animation-delay: -1.1s;
|
|
14
21
|
}
|
|
15
22
|
|
|
16
|
-
|
|
23
|
+
#loading_screen-rect3 {
|
|
17
24
|
-webkit-animation-delay: -1.0s;
|
|
18
25
|
animation-delay: -1.0s;
|
|
19
26
|
}
|
|
20
27
|
|
|
21
|
-
|
|
28
|
+
#loading_screen-rect4 {
|
|
22
29
|
-webkit-animation-delay: -0.9s;
|
|
23
30
|
animation-delay: -0.9s;
|
|
24
31
|
}
|
|
25
32
|
|
|
26
|
-
|
|
33
|
+
#loading_screen-rect5 {
|
|
27
34
|
-webkit-animation-delay: -0.8s;
|
|
28
35
|
animation-delay: -0.8s;
|
|
29
36
|
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
|
|
2
|
+
#loading_screen-cube1, #loading_screen-cube2 {
|
|
3
|
+
position: absolute;
|
|
4
|
+
background-color: orange;
|
|
5
|
+
width: 20px;
|
|
6
|
+
height: 20px;
|
|
7
|
+
top: 0;
|
|
8
|
+
left: 0;
|
|
9
|
+
|
|
10
|
+
-webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
|
|
11
|
+
animation: sk-cubemove 1.8s infinite ease-in-out;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
#loading_screen-cube2 {
|
|
15
|
+
-webkit-animation-delay: -0.9s;
|
|
16
|
+
animation-delay: -0.9s;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@-webkit-keyframes sk-cubemove {
|
|
20
|
+
25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
|
|
21
|
+
50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
|
|
22
|
+
75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
|
|
23
|
+
100% { -webkit-transform: rotate(-360deg) }
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
@keyframes sk-cubemove {
|
|
27
|
+
25% {
|
|
28
|
+
transform: translateX(42px) rotate(-90deg) scale(0.5);
|
|
29
|
+
-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
|
|
30
|
+
} 50% {
|
|
31
|
+
transform: translateX(42px) translateY(42px) rotate(-179deg);
|
|
32
|
+
-webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
|
|
33
|
+
} 50.1% {
|
|
34
|
+
transform: translateX(42px) translateY(42px) rotate(-180deg);
|
|
35
|
+
-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
|
|
36
|
+
} 75% {
|
|
37
|
+
transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
|
|
38
|
+
-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
|
|
39
|
+
} 100% {
|
|
40
|
+
transform: rotate(-360deg);
|
|
41
|
+
-webkit-transform: rotate(-360deg);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
@import url("loading_screen-default.css");
|
|
2
2
|
@import url("loading_screen-double-bounce.css");
|
|
3
3
|
@import url("loading_screen-rectangle-bounce.css");
|
|
4
|
+
@import url("loading_screen-wandering-cubes.css");
|
|
5
|
+
@import url("loading_screen-grid-cube.css");
|
|
4
6
|
|
|
5
7
|
.loading_screen-spinner {
|
|
6
8
|
position: fixed;
|
|
@@ -17,9 +19,4 @@
|
|
|
17
19
|
top:50%;
|
|
18
20
|
left:50%;
|
|
19
21
|
transform: translate(-50%,-50%);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.loading_screen-css {
|
|
23
|
-
height:90px;
|
|
24
|
-
width: 90px;
|
|
25
|
-
}
|
|
22
|
+
}
|
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.2.
|
|
4
|
+
version: 0.2.3
|
|
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-02-
|
|
13
|
+
date: 2018-02-07 00:00:00.000000000 Z
|
|
14
14
|
dependencies:
|
|
15
15
|
- !ruby/object:Gem::Dependency
|
|
16
16
|
name: bundler
|
|
@@ -101,7 +101,9 @@ files:
|
|
|
101
101
|
- vendor/assets/javascripts/loading_screen.js
|
|
102
102
|
- vendor/assets/stylesheets/loading_screen-default.css
|
|
103
103
|
- vendor/assets/stylesheets/loading_screen-double-bounce.css
|
|
104
|
+
- vendor/assets/stylesheets/loading_screen-grid-cube.css
|
|
104
105
|
- vendor/assets/stylesheets/loading_screen-rectangle-bounce.css
|
|
106
|
+
- vendor/assets/stylesheets/loading_screen-wandering-cubes.css
|
|
105
107
|
- vendor/assets/stylesheets/loading_screen.css
|
|
106
108
|
homepage: https://github.com/Mujadded/loading_screen
|
|
107
109
|
licenses:
|