bspin 0.2.1 → 1.0.0
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/.gitignore +1 -0
- data/.idea/.rakeTasks +1 -1
- data/README.md +11 -2
- data/app/helpers/bspin_helper.rb +62 -0
- data/app/views/bspin/_bspin.html.erb +553 -0
- data/bspin.gemspec +1 -1
- data/lib/bspin.rb +2 -1
- data/lib/bspin/version.rb +1 -1
- metadata +6 -4
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 17ba81510b62f9e2eaa78cc3674ca00d5317d0b1
|
|
4
|
+
data.tar.gz: 19089724c564ee393acbac95ab684e52f69b60ad
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 76d308b4945a967cb2d77d5f54d7c2632932b10073cfa0d2460e728e59cd5b1793c9f86c2db9baf067f03c117dbad97d576ffc70400379c98e2ec008ba0a7660
|
|
7
|
+
data.tar.gz: 48a09db0a149b5e21dd64aa033c4f34f182015ce965a32e6ad106b9153e270dcab1386022995fc7140e12705cf6ef947508c00d396965b93ab3504158ad092d1
|
data/.gitignore
CHANGED
data/.idea/.rakeTasks
CHANGED
|
@@ -4,4 +4,4 @@ You are allowed to:
|
|
|
4
4
|
1. Remove rake task
|
|
5
5
|
2. Add existing rake tasks
|
|
6
6
|
To add existing rake tasks automatically delete this file and reload the project.
|
|
7
|
-
--><RakeGroup description="" fullCmd="" taksId="rake"><RakeTask description="Build
|
|
7
|
+
--><RakeGroup description="" fullCmd="" taksId="rake"><RakeTask description="Build bspin-0.2.1.gem into the pkg directory" fullCmd="build" taksId="build" /><RakeTask description="Build and install bspin-0.2.1.gem into system gems" fullCmd="install" taksId="install" /><RakeGroup description="" fullCmd="" taksId="install"><RakeTask description="Build and install bspin-0.2.1.gem into system gems without network access" fullCmd="install:local" taksId="local" /></RakeGroup><RakeTask description="Create tag v0.2.1 and build and push bspin-0.2.1.gem to Rubygems" fullCmd="release" taksId="release" /><RakeGroup description="" fullCmd="" taksId="release"><RakeTask description="" fullCmd="release:guard_clean" taksId="guard_clean" /><RakeTask description="" fullCmd="release:rubygem_push" taksId="rubygem_push" /><RakeTask description="" fullCmd="release:source_control_push" taksId="source_control_push" /></RakeGroup></RakeGroup></Settings>
|
data/README.md
CHANGED
|
@@ -20,10 +20,19 @@ Or install it yourself as:
|
|
|
20
20
|
|
|
21
21
|
## Usage
|
|
22
22
|
|
|
23
|
-
in your
|
|
24
|
-
|
|
23
|
+
in your header have:
|
|
24
|
+
<style><%= styling -%></style>
|
|
25
25
|
|
|
26
26
|
An example call is <div class='bspin'></div>
|
|
27
|
+
|
|
28
|
+
Styling has several options:
|
|
29
|
+
type: "ball" | "circle1" | "circle1-fade" | "circle2" | "bubble1" | "bubble2" | "bar1" | "bar2" - default is "ball"
|
|
30
|
+
colour: any hex value or defined CSS colour value - default is black.
|
|
31
|
+
size: "small" | "medium" | "large" | "x-large" - default is medium.
|
|
32
|
+
speed: "slow" | "regular" | "fast" - default is regular.
|
|
33
|
+
|
|
34
|
+
Example: <%= styling(type: "circle1", colour: "#000000", size: "large", speed: "regular") -%>
|
|
35
|
+
|
|
27
36
|
|
|
28
37
|
## Development
|
|
29
38
|
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
module BspinHelper
|
|
2
|
+
def styling(options = {})
|
|
3
|
+
|
|
4
|
+
options[:colour] ||= 'black'
|
|
5
|
+
|
|
6
|
+
if options[:type] == "ball"
|
|
7
|
+
sizing = "1"
|
|
8
|
+
else
|
|
9
|
+
sizing = "2"
|
|
10
|
+
end
|
|
11
|
+
|
|
12
|
+
case options[:size]
|
|
13
|
+
when "small"
|
|
14
|
+
sizing == "1" ? options[:size] = 30 : options[:size] = 5
|
|
15
|
+
when "medium"
|
|
16
|
+
sizing == "1" ? options[:size] = 50 : options[:size] = 11
|
|
17
|
+
when "large"
|
|
18
|
+
sizing == "1" ? options[:size] = 90 : options[:size] = 18
|
|
19
|
+
when "x-large"
|
|
20
|
+
sizing == "1" ? options[:size] = 120 : options[:size] = 25
|
|
21
|
+
else
|
|
22
|
+
sizing == "1" ? options[:size] = 90 : options[:size] = 18
|
|
23
|
+
end
|
|
24
|
+
|
|
25
|
+
case options[:speed]
|
|
26
|
+
when "slow"
|
|
27
|
+
options[:speed] = 3.0
|
|
28
|
+
when "regular"
|
|
29
|
+
options[:speed] = 1.7
|
|
30
|
+
when "fast"
|
|
31
|
+
options[:speed] = 0.5
|
|
32
|
+
else
|
|
33
|
+
options[:speed] = 1.7
|
|
34
|
+
end
|
|
35
|
+
|
|
36
|
+
case options[:type]
|
|
37
|
+
when "ball"
|
|
38
|
+
spin_type = "ball"
|
|
39
|
+
when "circle1"
|
|
40
|
+
spin_type = "circle1"
|
|
41
|
+
when "circle1-fade"
|
|
42
|
+
spin_type = "circle1-fade"
|
|
43
|
+
when "circle2"
|
|
44
|
+
spin_type = "circle2"
|
|
45
|
+
when "bubble1"
|
|
46
|
+
spin_type = "bubble1"
|
|
47
|
+
when "bubble2"
|
|
48
|
+
spin_type = "bubble2"
|
|
49
|
+
when "bar1"
|
|
50
|
+
spin_type = "bar1"
|
|
51
|
+
when "bar2"
|
|
52
|
+
spin_type = "bar2"
|
|
53
|
+
else
|
|
54
|
+
spin_type = "ball"
|
|
55
|
+
end
|
|
56
|
+
|
|
57
|
+
render partial: 'bspin/bspin', locals: { colour: options[:colour],
|
|
58
|
+
size: options[:size],
|
|
59
|
+
speed: options[:speed],
|
|
60
|
+
spin_type: spin_type}
|
|
61
|
+
end
|
|
62
|
+
end
|
|
@@ -0,0 +1,553 @@
|
|
|
1
|
+
<%- case spin_type -%>
|
|
2
|
+
<%- when "ball" -%>
|
|
3
|
+
.bspin {
|
|
4
|
+
font-size: <%= size -%>px;
|
|
5
|
+
text-indent: -9999em;
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
width: 1em;
|
|
8
|
+
height: 1em;
|
|
9
|
+
border-radius: 50%;
|
|
10
|
+
margin: 72px auto;
|
|
11
|
+
position:fixed;
|
|
12
|
+
z-index:99;
|
|
13
|
+
top:0;
|
|
14
|
+
left:0;
|
|
15
|
+
right:0;
|
|
16
|
+
bottom:0;
|
|
17
|
+
margin:auto;
|
|
18
|
+
-webkit-transform: translateZ(0);
|
|
19
|
+
-ms-transform: translateZ(0);
|
|
20
|
+
transform: translateZ(0);
|
|
21
|
+
-webkit-animation: load6 <%= speed -%>s infinite ease;
|
|
22
|
+
animation: load6 <%= speed -%>s infinite ease;
|
|
23
|
+
}
|
|
24
|
+
@-webkit-keyframes load6 {
|
|
25
|
+
0% {
|
|
26
|
+
-webkit-transform: rotate(0deg);
|
|
27
|
+
transform: rotate(0deg);
|
|
28
|
+
box-shadow: 0 -0.83em 0 -0.4em <%= colour -%>, 0 -0.83em 0 -0.42em <%= colour -%>, 0 -0.83em 0 -0.44em <%= colour -%>, 0 -0.83em 0 -0.46em <%= colour -%>, 0 -0.83em 0 -0.477em <%= colour -%>;
|
|
29
|
+
}
|
|
30
|
+
5%,
|
|
31
|
+
95% {
|
|
32
|
+
box-shadow: 0 -0.83em 0 -0.4em <%= colour -%>, 0 -0.83em 0 -0.42em <%= colour -%>, 0 -0.83em 0 -0.44em <%= colour -%>, 0 -0.83em 0 -0.46em <%= colour -%>, 0 -0.83em 0 -0.477em <%= colour -%>;
|
|
33
|
+
}
|
|
34
|
+
10%,
|
|
35
|
+
59% {
|
|
36
|
+
box-shadow: 0 -0.83em 0 -0.4em <%= colour -%>, -0.087em -0.825em 0 -0.42em <%= colour -%>, -0.173em -0.812em 0 -0.44em <%= colour -%>, -0.256em -0.789em 0 -0.46em <%= colour -%>, -0.297em -0.775em 0 -0.477em <%= colour -%>;
|
|
37
|
+
}
|
|
38
|
+
20% {
|
|
39
|
+
box-shadow: 0 -0.83em 0 -0.4em <%= colour -%>, -0.338em -0.758em 0 -0.42em <%= colour -%>, -0.555em -0.617em 0 -0.44em <%= colour -%>, -0.671em -0.488em 0 -0.46em <%= colour -%>, -0.749em -0.34em 0 -0.477em <%= colour -%>;
|
|
40
|
+
}
|
|
41
|
+
38% {
|
|
42
|
+
box-shadow: 0 -0.83em 0 -0.4em <%= colour -%>, -0.377em -0.74em 0 -0.42em <%= colour -%>, -0.645em -0.522em 0 -0.44em <%= colour -%>, -0.775em -0.297em 0 -0.46em <%= colour -%>, -0.82em -0.09em 0 -0.477em <%= colour -%>;
|
|
43
|
+
}
|
|
44
|
+
100% {
|
|
45
|
+
-webkit-transform: rotate(360deg);
|
|
46
|
+
transform: rotate(360deg);
|
|
47
|
+
box-shadow: 0 -0.83em 0 -0.4em <%= colour -%>, 0 -0.83em 0 -0.42em <%= colour -%>, 0 -0.83em 0 -0.44em <%= colour -%>, 0 -0.83em 0 -0.46em <%= colour -%>, 0 -0.83em 0 -0.477em <%= colour -%>;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
@keyframes load6 {
|
|
51
|
+
0% {
|
|
52
|
+
-webkit-transform: rotate(0deg);
|
|
53
|
+
transform: rotate(0deg);
|
|
54
|
+
box-shadow: 0 -0.83em 0 -0.4em <%= colour -%>, 0 -0.83em 0 -0.42em <%= colour -%>, 0 -0.83em 0 -0.44em <%= colour -%>, 0 -0.83em 0 -0.46em <%= colour -%>, 0 -0.83em 0 -0.477em <%= colour -%>;
|
|
55
|
+
}
|
|
56
|
+
5%,
|
|
57
|
+
95% {
|
|
58
|
+
box-shadow: 0 -0.83em 0 -0.4em <%= colour -%>, 0 -0.83em 0 -0.42em <%= colour -%>, 0 -0.83em 0 -0.44em <%= colour -%>, 0 -0.83em 0 -0.46em <%= colour -%>, 0 -0.83em 0 -0.477em <%= colour -%>;
|
|
59
|
+
}
|
|
60
|
+
10%,
|
|
61
|
+
59% {
|
|
62
|
+
box-shadow: 0 -0.83em 0 -0.4em <%= colour -%>, -0.087em -0.825em 0 -0.42em <%= colour -%>, -0.173em -0.812em 0 -0.44em <%= colour -%>, -0.256em -0.789em 0 -0.46em <%= colour -%>, -0.297em -0.775em 0 -0.477em <%= colour -%>;
|
|
63
|
+
}
|
|
64
|
+
20% {
|
|
65
|
+
box-shadow: 0 -0.83em 0 -0.4em <%= colour -%>, -0.338em -0.758em 0 -0.42em <%= colour -%>, -0.555em -0.617em 0 -0.44em <%= colour -%>, -0.671em -0.488em 0 -0.46em <%= colour -%>, -0.749em -0.34em 0 -0.477em <%= colour -%>;
|
|
66
|
+
}
|
|
67
|
+
38% {
|
|
68
|
+
box-shadow: 0 -0.83em 0 -0.4em <%= colour -%>, -0.377em -0.74em 0 -0.42em <%= colour -%>, -0.645em -0.522em 0 -0.44em <%= colour -%>, -0.775em -0.297em 0 -0.46em <%= colour -%>, -0.82em -0.09em 0 -0.477em <%= colour -%>;
|
|
69
|
+
}
|
|
70
|
+
100% {
|
|
71
|
+
-webkit-transform: rotate(360deg);
|
|
72
|
+
transform: rotate(360deg);
|
|
73
|
+
box-shadow: 0 -0.83em 0 -0.4em <%= colour -%>, 0 -0.83em 0 -0.42em <%= colour -%>, 0 -0.83em 0 -0.44em <%= colour -%>, 0 -0.83em 0 -0.46em <%= colour -%>, 0 -0.83em 0 -0.477em <%= colour -%>;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
<%- when "circle1" -%>
|
|
77
|
+
.bspin,
|
|
78
|
+
.bspin:before,
|
|
79
|
+
.bspin:after {
|
|
80
|
+
border-radius: 50%;
|
|
81
|
+
}
|
|
82
|
+
.bspin:before,
|
|
83
|
+
.bspin:after {
|
|
84
|
+
position:fixed;
|
|
85
|
+
z-index:99;
|
|
86
|
+
|
|
87
|
+
content: '';
|
|
88
|
+
}
|
|
89
|
+
.bspin:before {
|
|
90
|
+
width: 5.2em;
|
|
91
|
+
height: 10.2em;
|
|
92
|
+
background: white;
|
|
93
|
+
border-radius: 10.2em 0 0 10.2em;
|
|
94
|
+
top: -0.1em;
|
|
95
|
+
left: -0.1em;
|
|
96
|
+
-webkit-transform-origin: 5.2em 5.1em;
|
|
97
|
+
transform-origin: 5.2em 5.1em;
|
|
98
|
+
-webkit-animation: load2 <%= speed -%>s infinite ease 1.5s;
|
|
99
|
+
animation: load2 <%= speed -%>s infinite ease 1.5s;
|
|
100
|
+
}
|
|
101
|
+
.bspin {
|
|
102
|
+
font-size: <%= size -%>px;
|
|
103
|
+
text-indent: -99999em;
|
|
104
|
+
margin: 55px auto;
|
|
105
|
+
position:fixed;
|
|
106
|
+
z-index:99;
|
|
107
|
+
top:0;
|
|
108
|
+
left:0;
|
|
109
|
+
right:0;
|
|
110
|
+
bottom:0;
|
|
111
|
+
margin:auto;
|
|
112
|
+
width: 10em;
|
|
113
|
+
height: 10em;
|
|
114
|
+
box-shadow: inset 0 0 0 1em <%= colour -%>;
|
|
115
|
+
-webkit-transform: translateZ(0);
|
|
116
|
+
-ms-transform: translateZ(0);
|
|
117
|
+
transform: translateZ(0);
|
|
118
|
+
}
|
|
119
|
+
.bspin:after {
|
|
120
|
+
width: 5.2em;
|
|
121
|
+
height: 10.2em;
|
|
122
|
+
background: white;
|
|
123
|
+
border-radius: 0 10.2em 10.2em 0;
|
|
124
|
+
top: -0.1em;
|
|
125
|
+
left: 5.1em;
|
|
126
|
+
-webkit-transform-origin: 0px 5.1em;
|
|
127
|
+
transform-origin: 0px 5.1em;
|
|
128
|
+
-webkit-animation: load2 <%= speed -%>s infinite ease;
|
|
129
|
+
animation: load2 <%= speed -%>s infinite ease;
|
|
130
|
+
}
|
|
131
|
+
@-webkit-keyframes load2 {
|
|
132
|
+
0% {
|
|
133
|
+
-webkit-transform: rotate(0deg);
|
|
134
|
+
transform: rotate(0deg);
|
|
135
|
+
}
|
|
136
|
+
100% {
|
|
137
|
+
-webkit-transform: rotate(360deg);
|
|
138
|
+
transform: rotate(360deg);
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
@keyframes load2 {
|
|
142
|
+
0% {
|
|
143
|
+
-webkit-transform: rotate(0deg);
|
|
144
|
+
transform: rotate(0deg);
|
|
145
|
+
}
|
|
146
|
+
100% {
|
|
147
|
+
-webkit-transform: rotate(360deg);
|
|
148
|
+
transform: rotate(360deg);
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
<%- when "circle1-fade" -%>
|
|
153
|
+
.bspin {
|
|
154
|
+
font-size: <%= size -%>px;
|
|
155
|
+
margin: 50px auto;
|
|
156
|
+
text-indent: -9999em;
|
|
157
|
+
width: 11em;
|
|
158
|
+
height: 11em;
|
|
159
|
+
border-radius: 50%;
|
|
160
|
+
background: <%= colour -%>;
|
|
161
|
+
background: -moz-linear-gradient(left, <%= colour -%> 10%, rgba(0, 0, 0, 0) 42%);
|
|
162
|
+
background: -webkit-linear-gradient(left, <%= colour -%> 10%, rgba(0, 0, 0, 0) 42%);
|
|
163
|
+
background: -o-linear-gradient(left, <%= colour -%> 10%, rgba(0, 0, 0, 0) 42%);
|
|
164
|
+
background: -ms-linear-gradient(left, <%= colour -%> 10%, rgba(0, 0, 0, 0) 42%);
|
|
165
|
+
background: linear-gradient(to right, <%= colour -%> 10%, rgba(0, 0, 0, 0) 42%);
|
|
166
|
+
position: fixed;
|
|
167
|
+
z-index:99;
|
|
168
|
+
top:0;
|
|
169
|
+
left:0;
|
|
170
|
+
right:0;
|
|
171
|
+
bottom:0;
|
|
172
|
+
margin:auto;
|
|
173
|
+
-webkit-animation: load3 <%= speed -%>s infinite linear;
|
|
174
|
+
animation: load3 <%= speed -%>s infinite linear;
|
|
175
|
+
-webkit-transform: translateZ(0);
|
|
176
|
+
-ms-transform: translateZ(0);
|
|
177
|
+
transform: translateZ(0);
|
|
178
|
+
}
|
|
179
|
+
.bspin:before {
|
|
180
|
+
width: 50%;
|
|
181
|
+
height: 50%;
|
|
182
|
+
background: <%= colour -%>;
|
|
183
|
+
border-radius: 100% 0 0 0;
|
|
184
|
+
position: absolute;
|
|
185
|
+
top: 0;
|
|
186
|
+
left: 0;
|
|
187
|
+
content: '';
|
|
188
|
+
}
|
|
189
|
+
.bspin:after {
|
|
190
|
+
background: white;
|
|
191
|
+
width: 75%;
|
|
192
|
+
height: 75%;
|
|
193
|
+
border-radius: 50%;
|
|
194
|
+
content: '';
|
|
195
|
+
margin: auto;
|
|
196
|
+
position: absolute;
|
|
197
|
+
top: 0;
|
|
198
|
+
left: 0;
|
|
199
|
+
bottom: 0;
|
|
200
|
+
right: 0;
|
|
201
|
+
}
|
|
202
|
+
@-webkit-keyframes load3 {
|
|
203
|
+
0% {
|
|
204
|
+
-webkit-transform: rotate(0deg);
|
|
205
|
+
transform: rotate(0deg);
|
|
206
|
+
}
|
|
207
|
+
100% {
|
|
208
|
+
-webkit-transform: rotate(360deg);
|
|
209
|
+
transform: rotate(360deg);
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
@keyframes load3 {
|
|
213
|
+
0% {
|
|
214
|
+
-webkit-transform: rotate(0deg);
|
|
215
|
+
transform: rotate(0deg);
|
|
216
|
+
}
|
|
217
|
+
100% {
|
|
218
|
+
-webkit-transform: rotate(360deg);
|
|
219
|
+
transform: rotate(360deg);
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
<%- when "circle2" -%>
|
|
224
|
+
.bspin {
|
|
225
|
+
margin: 60px auto;
|
|
226
|
+
font-size: <%= size -%>px;
|
|
227
|
+
position: fixed;
|
|
228
|
+
z-index:99;
|
|
229
|
+
top:0;
|
|
230
|
+
left:0;
|
|
231
|
+
right:0;
|
|
232
|
+
bottom:0;
|
|
233
|
+
margin:auto;
|
|
234
|
+
text-indent: -9999em;
|
|
235
|
+
<%#- TODO - color conversions for transparency. Use gem color? %>
|
|
236
|
+
<%#- colourhex.scan(/../).map {|color| color.to_i(16)} -%>
|
|
237
|
+
border-top: 1.1em solid rgba(0,0,0, 0.2);
|
|
238
|
+
border-right: 1.1em solid rgba(0,0,0, 0.2);
|
|
239
|
+
border-bottom: 1.1em solid rgba(0,0,0, 0.2);
|
|
240
|
+
border-left: 1.1em solid <%= colour -%>;
|
|
241
|
+
-webkit-transform: translateZ(0);
|
|
242
|
+
-ms-transform: translateZ(0);
|
|
243
|
+
transform: translateZ(0);
|
|
244
|
+
-webkit-animation: load8 <%= speed -%>s infinite linear;
|
|
245
|
+
animation: load8 <%= speed -%>s infinite linear;
|
|
246
|
+
}
|
|
247
|
+
.bspin,
|
|
248
|
+
.bspin:after {
|
|
249
|
+
border-radius: 50%;
|
|
250
|
+
width: 10em;
|
|
251
|
+
height: 10em;
|
|
252
|
+
}
|
|
253
|
+
@-webkit-keyframes load8 {
|
|
254
|
+
0% {
|
|
255
|
+
-webkit-transform: rotate(0deg);
|
|
256
|
+
transform: rotate(0deg);
|
|
257
|
+
}
|
|
258
|
+
100% {
|
|
259
|
+
-webkit-transform: rotate(360deg);
|
|
260
|
+
transform: rotate(360deg);
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
@keyframes load8 {
|
|
264
|
+
0% {
|
|
265
|
+
-webkit-transform: rotate(0deg);
|
|
266
|
+
transform: rotate(0deg);
|
|
267
|
+
}
|
|
268
|
+
100% {
|
|
269
|
+
-webkit-transform: rotate(360deg);
|
|
270
|
+
transform: rotate(360deg);
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
<%- when "bubble1" -%>
|
|
274
|
+
.bspin {
|
|
275
|
+
font-size: <%= size -%>px;
|
|
276
|
+
margin: 100px auto;
|
|
277
|
+
width: 1em;
|
|
278
|
+
height: 1em;
|
|
279
|
+
border-radius: 50%;
|
|
280
|
+
position: fixed;
|
|
281
|
+
z-index:99;
|
|
282
|
+
top:0;
|
|
283
|
+
left:0;
|
|
284
|
+
right:0;
|
|
285
|
+
bottom:0;
|
|
286
|
+
margin:auto;
|
|
287
|
+
text-indent: -9999em;
|
|
288
|
+
-webkit-animation: load4 <%= speed -%>s infinite linear;
|
|
289
|
+
animation: load4 <%= speed -%>s infinite linear;
|
|
290
|
+
-webkit-transform: translateZ(0);
|
|
291
|
+
-ms-transform: translateZ(0);
|
|
292
|
+
transform: translateZ(0);
|
|
293
|
+
}
|
|
294
|
+
@-webkit-keyframes load4 {
|
|
295
|
+
0%,
|
|
296
|
+
100% {
|
|
297
|
+
box-shadow: 0 -3em 0 0.2em <%= colour -%>, 2em -2em 0 0em <%= colour -%>, 3em 0 0 -1em <%= colour -%>, 2em 2em 0 -1em <%= colour -%>, 0 3em 0 -1em <%= colour -%>, -2em 2em 0 -1em <%= colour -%>, -3em 0 0 -1em <%= colour -%>, -2em -2em 0 0 <%= colour -%>;
|
|
298
|
+
}
|
|
299
|
+
12.5% {
|
|
300
|
+
box-shadow: 0 -3em 0 0 <%= colour -%>, 2em -2em 0 0.2em <%= colour -%>, 3em 0 0 0 <%= colour -%>, 2em 2em 0 -1em <%= colour -%>, 0 3em 0 -1em <%= colour -%>, -2em 2em 0 -1em <%= colour -%>, -3em 0 0 -1em <%= colour -%>, -2em -2em 0 -1em <%= colour -%>;
|
|
301
|
+
}
|
|
302
|
+
25% {
|
|
303
|
+
box-shadow: 0 -3em 0 -0.5em <%= colour -%>, 2em -2em 0 0 <%= colour -%>, 3em 0 0 0.2em <%= colour -%>, 2em 2em 0 0 <%= colour -%>, 0 3em 0 -1em <%= colour -%>, -2em 2em 0 -1em <%= colour -%>, -3em 0 0 -1em <%= colour -%>, -2em -2em 0 -1em <%= colour -%>;
|
|
304
|
+
}
|
|
305
|
+
37.5% {
|
|
306
|
+
box-shadow: 0 -3em 0 -1em <%= colour -%>, 2em -2em 0 -1em <%= colour -%>, 3em 0em 0 0 <%= colour -%>, 2em 2em 0 0.2em <%= colour -%>, 0 3em 0 0em <%= colour -%>, -2em 2em 0 -1em <%= colour -%>, -3em 0em 0 -1em <%= colour -%>, -2em -2em 0 -1em <%= colour -%>;
|
|
307
|
+
}
|
|
308
|
+
50% {
|
|
309
|
+
box-shadow: 0 -3em 0 -1em <%= colour -%>, 2em -2em 0 -1em <%= colour -%>, 3em 0 0 -1em <%= colour -%>, 2em 2em 0 0em <%= colour -%>, 0 3em 0 0.2em <%= colour -%>, -2em 2em 0 0 <%= colour -%>, -3em 0em 0 -1em <%= colour -%>, -2em -2em 0 -1em <%= colour -%>;
|
|
310
|
+
}
|
|
311
|
+
62.5% {
|
|
312
|
+
box-shadow: 0 -3em 0 -1em <%= colour -%>, 2em -2em 0 -1em <%= colour -%>, 3em 0 0 -1em <%= colour -%>, 2em 2em 0 -1em <%= colour -%>, 0 3em 0 0 <%= colour -%>, -2em 2em 0 0.2em <%= colour -%>, -3em 0 0 0 <%= colour -%>, -2em -2em 0 -1em <%= colour -%>;
|
|
313
|
+
}
|
|
314
|
+
75% {
|
|
315
|
+
box-shadow: 0em -3em 0 -1em <%= colour -%>, 2em -2em 0 -1em <%= colour -%>, 3em 0em 0 -1em <%= colour -%>, 2em 2em 0 -1em <%= colour -%>, 0 3em 0 -1em <%= colour -%>, -2em 2em 0 0 <%= colour -%>, -3em 0em 0 0.2em <%= colour -%>, -2em -2em 0 0 <%= colour -%>;
|
|
316
|
+
}
|
|
317
|
+
87.5% {
|
|
318
|
+
box-shadow: 0em -3em 0 0 <%= colour -%>, 2em -2em 0 -1em <%= colour -%>, 3em 0 0 -1em <%= colour -%>, 2em 2em 0 -1em <%= colour -%>, 0 3em 0 -1em <%= colour -%>, -2em 2em 0 0 <%= colour -%>, -3em 0em 0 0 <%= colour -%>, -2em -2em 0 0.2em <%= colour -%>;
|
|
319
|
+
}
|
|
320
|
+
}
|
|
321
|
+
@keyframes load4 {
|
|
322
|
+
0%,
|
|
323
|
+
100% {
|
|
324
|
+
box-shadow: 0 -3em 0 0.2em <%= colour -%>, 2em -2em 0 0em <%= colour -%>, 3em 0 0 -1em <%= colour -%>, 2em 2em 0 -1em <%= colour -%>, 0 3em 0 -1em <%= colour -%>, -2em 2em 0 -1em <%= colour -%>, -3em 0 0 -1em <%= colour -%>, -2em -2em 0 0 <%= colour -%>;
|
|
325
|
+
}
|
|
326
|
+
12.5% {
|
|
327
|
+
box-shadow: 0 -3em 0 0 <%= colour -%>, 2em -2em 0 0.2em <%= colour -%>, 3em 0 0 0 <%= colour -%>, 2em 2em 0 -1em <%= colour -%>, 0 3em 0 -1em <%= colour -%>, -2em 2em 0 -1em <%= colour -%>, -3em 0 0 -1em <%= colour -%>, -2em -2em 0 -1em <%= colour -%>;
|
|
328
|
+
}
|
|
329
|
+
25% {
|
|
330
|
+
box-shadow: 0 -3em 0 -0.5em <%= colour -%>, 2em -2em 0 0 <%= colour -%>, 3em 0 0 0.2em <%= colour -%>, 2em 2em 0 0 <%= colour -%>, 0 3em 0 -1em <%= colour -%>, -2em 2em 0 -1em <%= colour -%>, -3em 0 0 -1em <%= colour -%>, -2em -2em 0 -1em <%= colour -%>;
|
|
331
|
+
}
|
|
332
|
+
37.5% {
|
|
333
|
+
box-shadow: 0 -3em 0 -1em <%= colour -%>, 2em -2em 0 -1em <%= colour -%>, 3em 0em 0 0 <%= colour -%>, 2em 2em 0 0.2em <%= colour -%>, 0 3em 0 0em <%= colour -%>, -2em 2em 0 -1em <%= colour -%>, -3em 0em 0 -1em <%= colour -%>, -2em -2em 0 -1em <%= colour -%>;
|
|
334
|
+
}
|
|
335
|
+
50% {
|
|
336
|
+
box-shadow: 0 -3em 0 -1em <%= colour -%>, 2em -2em 0 -1em <%= colour -%>, 3em 0 0 -1em <%= colour -%>, 2em 2em 0 0em <%= colour -%>, 0 3em 0 0.2em <%= colour -%>, -2em 2em 0 0 <%= colour -%>, -3em 0em 0 -1em <%= colour -%>, -2em -2em 0 -1em <%= colour -%>;
|
|
337
|
+
}
|
|
338
|
+
62.5% {
|
|
339
|
+
box-shadow: 0 -3em 0 -1em <%= colour -%>, 2em -2em 0 -1em <%= colour -%>, 3em 0 0 -1em <%= colour -%>, 2em 2em 0 -1em <%= colour -%>, 0 3em 0 0 <%= colour -%>, -2em 2em 0 0.2em <%= colour -%>, -3em 0 0 0 <%= colour -%>, -2em -2em 0 -1em <%= colour -%>;
|
|
340
|
+
}
|
|
341
|
+
75% {
|
|
342
|
+
box-shadow: 0em -3em 0 -1em <%= colour -%>, 2em -2em 0 -1em <%= colour -%>, 3em 0em 0 -1em <%= colour -%>, 2em 2em 0 -1em <%= colour -%>, 0 3em 0 -1em <%= colour -%>, -2em 2em 0 0 <%= colour -%>, -3em 0em 0 0.2em <%= colour -%>, -2em -2em 0 0 <%= colour -%>;
|
|
343
|
+
}
|
|
344
|
+
87.5% {
|
|
345
|
+
box-shadow: 0em -3em 0 0 <%= colour -%>, 2em -2em 0 -1em <%= colour -%>, 3em 0 0 -1em <%= colour -%>, 2em 2em 0 -1em <%= colour -%>, 0 3em 0 -1em <%= colour -%>, -2em 2em 0 0 <%= colour -%>, -3em 0em 0 0 <%= colour -%>, -2em -2em 0 0.2em <%= colour -%>;
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
<%- when "bubble2" -%>
|
|
349
|
+
.bspin {
|
|
350
|
+
margin: 100px auto;
|
|
351
|
+
font-size: <%= size %>px;
|
|
352
|
+
width: 1em;
|
|
353
|
+
height: 1em;
|
|
354
|
+
border-radius: 50%;
|
|
355
|
+
position: fixed;
|
|
356
|
+
z-index:99;
|
|
357
|
+
top:0;
|
|
358
|
+
left:0;
|
|
359
|
+
right:0;
|
|
360
|
+
bottom:0;
|
|
361
|
+
margin:auto;
|
|
362
|
+
text-indent: -9999em;
|
|
363
|
+
-webkit-animation: load5 <%= speed -%>s infinite ease;
|
|
364
|
+
animation: load5 <%= speed -%>s infinite ease;
|
|
365
|
+
-webkit-transform: translateZ(0);
|
|
366
|
+
-ms-transform: translateZ(0);
|
|
367
|
+
transform: translateZ(0);
|
|
368
|
+
}
|
|
369
|
+
@-webkit-keyframes load5 {
|
|
370
|
+
0%,
|
|
371
|
+
100% {
|
|
372
|
+
box-shadow: 0em -2.6em 0em 0em <%= colour -%>, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.5), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
|
|
373
|
+
}
|
|
374
|
+
12.5% {
|
|
375
|
+
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.7), 1.8em -1.8em 0 0em <%= colour -%>, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
|
|
376
|
+
}
|
|
377
|
+
25% {
|
|
378
|
+
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.5), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7), 2.5em 0em 0 0em <%= colour -%>, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
|
379
|
+
}
|
|
380
|
+
37.5% {
|
|
381
|
+
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5), 2.5em 0em 0 0em rgba(0, 0, 0, 0.7), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
|
382
|
+
}
|
|
383
|
+
50% {
|
|
384
|
+
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.5), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.7), 0em 2.5em 0 0em <%= colour -%>, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
|
385
|
+
}
|
|
386
|
+
62.5% {
|
|
387
|
+
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.5), 0em 2.5em 0 0em rgba(0, 0, 0, 0.7), -1.8em 1.8em 0 0em <%= colour -%>, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
|
388
|
+
}
|
|
389
|
+
75% {
|
|
390
|
+
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.5), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.7), -2.6em 0em 0 0em <%= colour -%>, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
|
391
|
+
}
|
|
392
|
+
87.5% {
|
|
393
|
+
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.5), -2.6em 0em 0 0em rgba(0, 0, 0, 0.7), -1.8em -1.8em 0 0em <%= colour -%>;
|
|
394
|
+
}
|
|
395
|
+
}
|
|
396
|
+
@keyframes load5 {
|
|
397
|
+
0%,
|
|
398
|
+
100% {
|
|
399
|
+
box-shadow: 0em -2.6em 0em 0em <%= colour -%>, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.5), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
|
|
400
|
+
}
|
|
401
|
+
12.5% {
|
|
402
|
+
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.7), 1.8em -1.8em 0 0em <%= colour -%>, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
|
|
403
|
+
}
|
|
404
|
+
25% {
|
|
405
|
+
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.5), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7), 2.5em 0em 0 0em <%= colour -%>, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
|
406
|
+
}
|
|
407
|
+
37.5% {
|
|
408
|
+
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5), 2.5em 0em 0 0em rgba(0, 0, 0, 0.7), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
|
409
|
+
}
|
|
410
|
+
50% {
|
|
411
|
+
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.5), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.7), 0em 2.5em 0 0em <%= colour -%>, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
|
412
|
+
}
|
|
413
|
+
62.5% {
|
|
414
|
+
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.5), 0em 2.5em 0 0em rgba(0, 0, 0, 0.7), -1.8em 1.8em 0 0em <%= colour -%>, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
|
415
|
+
}
|
|
416
|
+
75% {
|
|
417
|
+
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.5), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.7), -2.6em 0em 0 0em <%= colour -%>, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
|
|
418
|
+
}
|
|
419
|
+
87.5% {
|
|
420
|
+
box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.5), -2.6em 0em 0 0em rgba(0, 0, 0, 0.7), -1.8em -1.8em 0 0em <%= colour -%>;
|
|
421
|
+
}
|
|
422
|
+
}
|
|
423
|
+
<%- when "bar1" -%>
|
|
424
|
+
.bspin:before,
|
|
425
|
+
.bspin:after,
|
|
426
|
+
.bspin {
|
|
427
|
+
border-radius: 50%;
|
|
428
|
+
width: 2.5em;
|
|
429
|
+
height: 2.5em;
|
|
430
|
+
-webkit-animation-fill-mode: both;
|
|
431
|
+
animation-fill-mode: both;
|
|
432
|
+
-webkit-animation: load7 <%= speed -%>s infinite ease-in-out;
|
|
433
|
+
animation: load7 <%= speed -%>s infinite ease-in-out;
|
|
434
|
+
}
|
|
435
|
+
.bspin {
|
|
436
|
+
font-size: <%= size -%>px;
|
|
437
|
+
margin: 80px auto;
|
|
438
|
+
position: fixed;
|
|
439
|
+
z-index:99;
|
|
440
|
+
top:0;
|
|
441
|
+
left:0;
|
|
442
|
+
right:0;
|
|
443
|
+
bottom:0;
|
|
444
|
+
margin:auto;
|
|
445
|
+
text-indent: -9999em;
|
|
446
|
+
-webkit-transform: translateZ(0);
|
|
447
|
+
-ms-transform: translateZ(0);
|
|
448
|
+
transform: translateZ(0);
|
|
449
|
+
-webkit-animation-delay: -0.16s;
|
|
450
|
+
animation-delay: -0.16s;
|
|
451
|
+
}
|
|
452
|
+
.bspin:before {
|
|
453
|
+
left: -3.5em;
|
|
454
|
+
-webkit-animation-delay: -0.32s;
|
|
455
|
+
animation-delay: -0.32s;
|
|
456
|
+
}
|
|
457
|
+
.bspin:after {
|
|
458
|
+
left: 3.5em;
|
|
459
|
+
}
|
|
460
|
+
.bspin:before,
|
|
461
|
+
.bspin:after {
|
|
462
|
+
content: '';
|
|
463
|
+
position: absolute;
|
|
464
|
+
top: 0;
|
|
465
|
+
}
|
|
466
|
+
@-webkit-keyframes load7 {
|
|
467
|
+
0%,
|
|
468
|
+
80%,
|
|
469
|
+
100% {
|
|
470
|
+
box-shadow: 0 2.5em 0 -1.3em <%= colour -%>;
|
|
471
|
+
}
|
|
472
|
+
40% {
|
|
473
|
+
box-shadow: 0 2.5em 0 0 <%= colour -%>;
|
|
474
|
+
}
|
|
475
|
+
}
|
|
476
|
+
@keyframes load7 {
|
|
477
|
+
0%,
|
|
478
|
+
80%,
|
|
479
|
+
100% {
|
|
480
|
+
box-shadow: 0 2.5em 0 -1.3em <%= colour -%>;
|
|
481
|
+
}
|
|
482
|
+
40% {
|
|
483
|
+
box-shadow: 0 2.5em 0 0 <%= colour -%>;
|
|
484
|
+
}
|
|
485
|
+
}
|
|
486
|
+
<%- when "bar2" -%>
|
|
487
|
+
.bspin,
|
|
488
|
+
.bspin:before,
|
|
489
|
+
.bspin:after {
|
|
490
|
+
background: <%= colour -%>;
|
|
491
|
+
-webkit-animation: load1 <%= speed -%>s infinite ease-in-out;
|
|
492
|
+
animation: load1 <%= speed -%>s infinite ease-in-out;
|
|
493
|
+
width: 1em;
|
|
494
|
+
height: 4em;
|
|
495
|
+
}
|
|
496
|
+
.bspin:before,
|
|
497
|
+
.bspin:after {
|
|
498
|
+
position: absolute;
|
|
499
|
+
top: 0;
|
|
500
|
+
content: '';
|
|
501
|
+
}
|
|
502
|
+
.bspin:before {
|
|
503
|
+
left: -1.5em;
|
|
504
|
+
-webkit-animation-delay: -0.32s;
|
|
505
|
+
animation-delay: -0.32s;
|
|
506
|
+
}
|
|
507
|
+
.bspin {
|
|
508
|
+
text-indent: -9999em;
|
|
509
|
+
margin: 88px auto;
|
|
510
|
+
position: fixed;
|
|
511
|
+
z-index:99;
|
|
512
|
+
top:0;
|
|
513
|
+
left:0;
|
|
514
|
+
right:0;
|
|
515
|
+
bottom:0;
|
|
516
|
+
margin:auto;
|
|
517
|
+
font-size: <%= size -%>px;
|
|
518
|
+
-webkit-transform: translateZ(0);
|
|
519
|
+
-ms-transform: translateZ(0);
|
|
520
|
+
transform: translateZ(0);
|
|
521
|
+
-webkit-animation-delay: -0.16s;
|
|
522
|
+
animation-delay: -0.16s;
|
|
523
|
+
}
|
|
524
|
+
.bspin:after {
|
|
525
|
+
left: 1.5em;
|
|
526
|
+
}
|
|
527
|
+
@-webkit-keyframes load1 {
|
|
528
|
+
0%,
|
|
529
|
+
80%,
|
|
530
|
+
100% {
|
|
531
|
+
box-shadow: 0 0 <%= colour -%>;
|
|
532
|
+
height: 4em;
|
|
533
|
+
}
|
|
534
|
+
40% {
|
|
535
|
+
box-shadow: 0 -2em <%= colour -%>;
|
|
536
|
+
height: 5em;
|
|
537
|
+
}
|
|
538
|
+
}
|
|
539
|
+
@keyframes load1 {
|
|
540
|
+
0%,
|
|
541
|
+
80%,
|
|
542
|
+
100% {
|
|
543
|
+
box-shadow: 0 0 <%= colour -%>;
|
|
544
|
+
height: 4em;
|
|
545
|
+
}
|
|
546
|
+
40% {
|
|
547
|
+
box-shadow: 0 -2em <%= colour -%>;
|
|
548
|
+
height: 5em;
|
|
549
|
+
}
|
|
550
|
+
}
|
|
551
|
+
|
|
552
|
+
|
|
553
|
+
<%- end -%>
|
data/bspin.gemspec
CHANGED
|
@@ -10,7 +10,7 @@ Gem::Specification.new do |spec|
|
|
|
10
10
|
spec.email = ["wayne@barebonesphoto.com"]
|
|
11
11
|
|
|
12
12
|
spec.summary = %q{A CSS based spinner.}
|
|
13
|
-
spec.description = %q{This
|
|
13
|
+
spec.description = %q{This has a variety of spinners that sit in the middle of the page as an overlay.}
|
|
14
14
|
spec.homepage = "https://bitbucket.org"
|
|
15
15
|
spec.license = "MIT"
|
|
16
16
|
|
data/lib/bspin.rb
CHANGED
data/lib/bspin/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: bspin
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 1.0.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Wayne Harlech-Jones
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: exe
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2015-07-
|
|
11
|
+
date: 2015-07-29 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: bundler
|
|
@@ -38,8 +38,8 @@ dependencies:
|
|
|
38
38
|
- - "~>"
|
|
39
39
|
- !ruby/object:Gem::Version
|
|
40
40
|
version: '10.0'
|
|
41
|
-
description: This
|
|
42
|
-
overlay.
|
|
41
|
+
description: This has a variety of spinners that sit in the middle of the page as
|
|
42
|
+
an overlay.
|
|
43
43
|
email:
|
|
44
44
|
- wayne@barebonesphoto.com
|
|
45
45
|
executables: []
|
|
@@ -53,6 +53,8 @@ files:
|
|
|
53
53
|
- LICENSE.txt
|
|
54
54
|
- README.md
|
|
55
55
|
- Rakefile
|
|
56
|
+
- app/helpers/bspin_helper.rb
|
|
57
|
+
- app/views/bspin/_bspin.html.erb
|
|
56
58
|
- bin/console
|
|
57
59
|
- bin/setup
|
|
58
60
|
- bspin.gemspec
|