loading_screen 0.2.0 → 0.2.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +14 -2
- data/app/helpers/loading_screen/loading_screen_helper.rb +23 -10
- data/loading_screen.gemspec +1 -1
- data/vendor/assets/stylesheets/{loading_screen-double_bounce.css → loading_screen-double-bounce.css} +2 -2
- data/vendor/assets/stylesheets/loading_screen-rectangle-bounce.css +44 -0
- data/vendor/assets/stylesheets/loading_screen.css +3 -2
- metadata +4 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 20eb3c1d766e90b00d5320038153803678a36b25
|
4
|
+
data.tar.gz: cd4ca7605bb2ece39dd6407ab699b267e866980f
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: cfef88009cbedb2b5d605da20fee4291e8b924b021f8675d501d8ccc8697ae75115ba6995d5b2d59f5639b01efc0bb5dacae17ed9411e325a579611e2755890a
|
7
|
+
data.tar.gz: 6d5424d63a3ea6045220de2b1f6f95ad9b4b78e601c6e114c9e406cbc56f88e9a3becb6b3efcff764d8870820c40117e0589e834abb88ec6df13ca1027dae3ed
|
data/README.md
CHANGED
@@ -44,13 +44,25 @@ We are all set, to use it with default `rotating_square` animation in any view f
|
|
44
44
|
There are also other loading animation available for you to choose from, like:
|
45
45
|
|
46
46
|
```
|
47
|
-
<%= loading_screen style: :double_bounce %>
|
47
|
+
<%= loading_screen style: :double_bounce %>
|
48
48
|
```
|
49
|
+
|
50
|
+
```
|
51
|
+
<%= loading_screen style: :rectangle_bounce %>
|
52
|
+
```
|
53
|
+
|
49
54
|
Other animations will be available shortly...
|
50
55
|
|
56
|
+
You can change the color of the animation and also the background of the loader just add:
|
57
|
+
|
58
|
+
```
|
59
|
+
<%= loading_screen style: :double_bounce, color: 'red', background: 'green' %>
|
60
|
+
```
|
61
|
+
Color format like `hash`, `rgb`, `rgba`, etc css color format are acceptable
|
62
|
+
|
51
63
|
### Using custom gif images
|
52
64
|
|
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:
|
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:
|
54
66
|
```
|
55
67
|
<%= loading_screen gif: 'your gif file name witout ".gif" ' %>
|
56
68
|
```
|
@@ -1,9 +1,9 @@
|
|
1
1
|
module LoadingScreen::LoadingScreenHelper
|
2
2
|
|
3
3
|
def loading_screen(options={})
|
4
|
-
options[:style] = :default unless options[:style]
|
5
|
-
|
6
|
-
content_tag :div, '', class: 'loading_screen-spinner' do
|
4
|
+
options[:style] = :default unless options[:style]
|
5
|
+
options[:background] = "background-color: " + options[:background] if options[:background]
|
6
|
+
content_tag :div, '', class: 'loading_screen-spinner', style: options[:background] do
|
7
7
|
if options[:gif].present?
|
8
8
|
gif_handler options
|
9
9
|
else
|
@@ -23,25 +23,38 @@ module LoadingScreen::LoadingScreenHelper
|
|
23
23
|
end
|
24
24
|
|
25
25
|
def css_handler(options)
|
26
|
+
options[:color] = "background-color: " + options[:color] if options[:color]
|
26
27
|
content_tag :div, '', class: 'loading_screen-css' do
|
27
28
|
if options[:style] == :double_bounce
|
28
|
-
load_double_bounce
|
29
|
+
load_double_bounce options[:color]
|
30
|
+
elsif options[:style] == :rectangle_bounce
|
31
|
+
load_rectangle_bounce options[:color]
|
29
32
|
elsif options[:style] == :default
|
30
|
-
load_rotate_square
|
33
|
+
load_rotate_square options[:color]
|
31
34
|
else
|
32
35
|
raise LoadingScreen::InvalidOptionError.new "Wrong style name: '#{options[:style]}'"
|
33
36
|
end
|
34
37
|
end
|
35
38
|
end
|
36
39
|
|
37
|
-
def load_double_bounce
|
40
|
+
def load_double_bounce(color)
|
38
41
|
[].tap do |array|
|
39
|
-
array << content_tag(:div, '', id: 'loading_screen-
|
40
|
-
array << content_tag(:div, '', id: 'loading_screen-
|
42
|
+
array << content_tag(:div, '', id: 'loading_screen-double-bounce1', style: color )
|
43
|
+
array << content_tag(:div, '', id: 'loading_screen-double-bounce2' , style: color )
|
41
44
|
end.join.html_safe
|
42
45
|
end
|
43
46
|
|
44
|
-
def load_rotate_square
|
45
|
-
content_tag :div, '', id: 'loading_screen-rotating-square'
|
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)
|
58
|
+
end.join.html_safe
|
46
59
|
end
|
47
60
|
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 = '0.2.
|
7
|
+
spec.version = '0.2.1'
|
8
8
|
spec.authors = ["Mujadded Al Rabbani Alif", "Yearsin Ar Rahman", "Swakhar Dey"]
|
9
9
|
spec.email = ["Mujadded.alif@gmail.com"]
|
10
10
|
|
data/vendor/assets/stylesheets/{loading_screen-double_bounce.css → loading_screen-double-bounce.css}
RENAMED
@@ -1,4 +1,4 @@
|
|
1
|
-
#loading_screen-
|
1
|
+
#loading_screen-double-bounce1, #loading_screen-double-bounce2 {
|
2
2
|
width: 100%;
|
3
3
|
height: 100%;
|
4
4
|
border-radius: 50%;
|
@@ -9,7 +9,7 @@
|
|
9
9
|
animation: sk-bounce 2.0s infinite ease-in-out;
|
10
10
|
}
|
11
11
|
|
12
|
-
#loading_screen-
|
12
|
+
#loading_screen-double-bounce2 {
|
13
13
|
-webkit-animation-delay: -1.0s;
|
14
14
|
animation-delay: -1.0s;
|
15
15
|
}
|
@@ -0,0 +1,44 @@
|
|
1
|
+
.loading_screen-css > div {
|
2
|
+
background-color: orange;
|
3
|
+
height: 90%;
|
4
|
+
width: 6px;
|
5
|
+
display: inline-block;
|
6
|
+
margin-left: 2px;
|
7
|
+
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
|
8
|
+
animation: sk-stretchdelay 1.2s infinite ease-in-out;
|
9
|
+
}
|
10
|
+
|
11
|
+
.loading_screen-css #loading_screen-rect2 {
|
12
|
+
-webkit-animation-delay: -1.1s;
|
13
|
+
animation-delay: -1.1s;
|
14
|
+
}
|
15
|
+
|
16
|
+
.loading_screen-css #loading_screen-rect3 {
|
17
|
+
-webkit-animation-delay: -1.0s;
|
18
|
+
animation-delay: -1.0s;
|
19
|
+
}
|
20
|
+
|
21
|
+
.loading_screen-css #loading_screen-rect4 {
|
22
|
+
-webkit-animation-delay: -0.9s;
|
23
|
+
animation-delay: -0.9s;
|
24
|
+
}
|
25
|
+
|
26
|
+
.loading_screen-css #loading_screen-rect5 {
|
27
|
+
-webkit-animation-delay: -0.8s;
|
28
|
+
animation-delay: -0.8s;
|
29
|
+
}
|
30
|
+
|
31
|
+
@-webkit-keyframes sk-stretchdelay {
|
32
|
+
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
|
33
|
+
20% { -webkit-transform: scaleY(1.0) }
|
34
|
+
}
|
35
|
+
|
36
|
+
@keyframes sk-stretchdelay {
|
37
|
+
0%, 40%, 100% {
|
38
|
+
transform: scaleY(0.4);
|
39
|
+
-webkit-transform: scaleY(0.4);
|
40
|
+
} 20% {
|
41
|
+
transform: scaleY(1.0);
|
42
|
+
-webkit-transform: scaleY(1.0);
|
43
|
+
}
|
44
|
+
}
|
@@ -1,5 +1,6 @@
|
|
1
1
|
@import url("loading_screen-default.css");
|
2
|
-
@import url("loading_screen-
|
2
|
+
@import url("loading_screen-double-bounce.css");
|
3
|
+
@import url("loading_screen-rectangle-bounce.css");
|
3
4
|
|
4
5
|
.loading_screen-spinner {
|
5
6
|
position: fixed;
|
@@ -21,4 +22,4 @@
|
|
21
22
|
.loading_screen-css {
|
22
23
|
height:90px;
|
23
24
|
width: 90px;
|
24
|
-
}
|
25
|
+
}
|
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.1
|
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-
|
13
|
+
date: 2018-02-03 00:00:00.000000000 Z
|
14
14
|
dependencies:
|
15
15
|
- !ruby/object:Gem::Dependency
|
16
16
|
name: bundler
|
@@ -100,7 +100,8 @@ files:
|
|
100
100
|
- vendor/assets/images/.keep
|
101
101
|
- vendor/assets/javascripts/loading_screen.js
|
102
102
|
- vendor/assets/stylesheets/loading_screen-default.css
|
103
|
-
- vendor/assets/stylesheets/loading_screen-
|
103
|
+
- vendor/assets/stylesheets/loading_screen-double-bounce.css
|
104
|
+
- vendor/assets/stylesheets/loading_screen-rectangle-bounce.css
|
104
105
|
- vendor/assets/stylesheets/loading_screen.css
|
105
106
|
homepage: https://github.com/Mujadded/loading_screen
|
106
107
|
licenses:
|