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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 2b035fc0681435acf89d68db580d80620fd127b7
4
- data.tar.gz: 52214746d19bc1d38294d4b891ee494304f6704a
3
+ metadata.gz: 17ba81510b62f9e2eaa78cc3674ca00d5317d0b1
4
+ data.tar.gz: 19089724c564ee393acbac95ab684e52f69b60ad
5
5
  SHA512:
6
- metadata.gz: 7594d2b9a08438faa9b9a8e78f610a79cb87f7edc9d77f5e0928653c6c70f60ca00c5f29af9724a7972b2467812c1c7c0a13ebbdb252ba9e7a16a17538107642
7
- data.tar.gz: 7279afc061a0f08c433612e272d910a0e40b5bedc0cbdba4e424cae951bbe428ac9176e7599b9f4bcf7c18cd3e86e9ec48ce4999a847fe4bfe980ae189598eca
6
+ metadata.gz: 76d308b4945a967cb2d77d5f54d7c2632932b10073cfa0d2460e728e59cd5b1793c9f86c2db9baf067f03c117dbad97d576ffc70400379c98e2ec008ba0a7660
7
+ data.tar.gz: 48a09db0a149b5e21dd64aa033c4f34f182015ce965a32e6ad106b9153e270dcab1386022995fc7140e12705cf6ef947508c00d396965b93ab3504158ad092d1
data/.gitignore CHANGED
@@ -7,3 +7,4 @@
7
7
  /pkg/
8
8
  /spec/reports/
9
9
  /tmp/
10
+ *.2.1.gem
@@ -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 spinner-0.1.0.gem into the pkg directory" fullCmd="build" taksId="build" /><RakeTask description="Build and install spinner-0.1.0.gem into system gems" fullCmd="install" taksId="install" /><RakeGroup description="" fullCmd="" taksId="install"><RakeTask description="Build and install spinner-0.1.0.gem into system gems without network access" fullCmd="install:local" taksId="local" /></RakeGroup><RakeTask description="Create tag v0.1.0 and build and push spinner-0.1.0.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>
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 applicaion.css have:
24
- *= require bspin
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 -%>
@@ -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 will be a CSS spinner that sits in the middle of the page as an overlay.}
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
 
@@ -1,5 +1,6 @@
1
1
  require "bspin/version"
2
2
 
3
3
  module Bspin
4
- class Engine < ::Rails::Engine; end
4
+ class Engine < ::Rails::Engine;
5
+ end
5
6
  end
@@ -1,3 +1,3 @@
1
1
  module Bspin
2
- VERSION = "0.2.1"
2
+ VERSION = "1.0.0"
3
3
  end
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.2.1
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-28 00:00:00.000000000 Z
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 will be a CSS spinner that sits in the middle of the page as an
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