loading_screen 0.2.1 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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:
|