@@ -18,6 +18,7 @@ It's usually common to show a loader to users when they must wait for something
18
18
* [ default] ( #default )
19
19
* [ double] ( #double )
20
20
* [ bar] ( #bar )
21
+ * [ bar ping pong] ( #bar-ping-pong )
21
22
* [ border] ( #border )
22
23
* [ ball] ( #ball )
23
24
* [ smartphone] ( #smartphone )
@@ -56,15 +57,15 @@ Select the loader and add the corresponding HTML. In order to show the loader, y
56
57
57
58
## Examples
58
59
59
- ### Default | [ CSS ] ( https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-ball.css ) : sparkles :
60
+ ### Default
60
61
61
62
``` html
62
63
<div class =" loader loader-default is-active" ></div >
63
64
```
64
65
65
66
![ loader] ( https://cloud.githubusercontent.com/assets/1345662/19313531/2c715f18-906d-11e6-856a-17ca264112de.gif )
66
67
67
- [ See it] ( http://raphaelfabeni.com.br/css-loader/#/loader-default ) :metal :
68
+ [ See it] ( http://raphaelfabeni.com.br/css-loader/#/loader-default ) :metal : | [ CSS ] ( https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-ball.css ) : sparkles :
68
69
69
70
#### Variations
70
71
@@ -104,15 +105,15 @@ It's also possible to change the text, just passing a value to the attribute `da
104
105
105
106
The variations _ data-half_ , _ data-text_ and _ data-blink_ works together. 😄
106
107
107
- ### Double | [ CSS ] ( https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-double.css ) : sparkles :
108
+ ### Double
108
109
109
110
``` html
110
111
<div class =" loader loader-double is-active" ></div >
111
112
```
112
113
113
114
![ loader-double] ( https://cloud.githubusercontent.com/assets/1345662/19314508/c2279a06-9070-11e6-8079-4fa82b5f2610.gif )
114
115
115
- [ See it] ( http://raphaelfabeni.com.br/css-loader/#/loader-double ) :metal :
116
+ [ See it] ( http://raphaelfabeni.com.br/css-loader/#/loader-double ) :metal : | [ CSS ] ( https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-double.css ) : sparkles :
116
117
117
118
### Bar | [ CSS] ( https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-bar.css ) :sparkles :
118
119
@@ -162,15 +163,15 @@ Like the `loader` example, it's also possible to pass the `data-text` and `blink
162
163
163
164
* Obs* . It's also possible pass a parameter ` data-text ` with a content value that will show as a text loader, or with no value, and the default * loading* text it's going to show instead.
164
165
165
- ### Bar Ping Pong | [ CSS ] ( https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-bar-ping-pong.css ) : sparkles :
166
+ ### Bar Ping Pong
166
167
167
168
![ loader-bar-ping-pong] ( https://cloud.githubusercontent.com/assets/1345662/23591096/deed9e04-01c9-11e7-9d5f-356fa249ff00.gif )
168
169
169
170
``` html
170
171
<div class =" loader loader-bar-ping-pong is-active" ></div >
171
172
```
172
173
173
- [ See it] ( http://raphaelfabeni.com.br/css-loader/#/loader-bar-ping-pong ) :metal :
174
+ [ See it] ( http://raphaelfabeni.com.br/css-loader/#/loader-bar-ping-pong ) :metal : | [ CSS ] ( https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-bar-ping-pong.css ) : sparkles :
174
175
175
176
#### Variations
176
177
@@ -184,15 +185,15 @@ Like the `loader` example, it's also possible to pass the `data-text` and `blink
184
185
185
186
[ See it] ( http://raphaelfabeni.com.br/css-loader/#/loader-bar-ping-pong-rounded ) :metal :
186
187
187
- ### Border | [ CSS ] ( https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-border.css ) : sparkles :
188
+ ### Border
188
189
189
190
![ loader-border] ( https://cloud.githubusercontent.com/assets/1345662/19314686/6d733622-9071-11e6-8167-a55e6c16a02f.gif )
190
191
191
192
``` html
192
193
<div class =" loader loader-border is-active" ></div >
193
194
```
194
195
195
- [ See it] ( http://raphaelfabeni.com.br/css-loader/#/loader-border ) :metal :
196
+ [ See it] ( http://raphaelfabeni.com.br/css-loader/#/loader-border ) :metal : | [ CSS ] ( https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-border.css ) : sparkles :
196
197
197
198
#### Variations
198
199
@@ -208,15 +209,15 @@ Like the `loader` example, it's also possible to pass the `data-text` and `blink
208
209
209
210
[ See it] ( http://raphaelfabeni.com.br/css-loader/#/loader-border-text ) :metal :
210
211
211
- ### Ball | [ CSS ] ( https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-ball.css ) : sparkles :
212
+ ### Ball
212
213
213
214
``` html
214
215
<div class =" loader loader-ball is-active" ></div >
215
216
```
216
217
217
218
![ loader-ball] ( https://cloud.githubusercontent.com/assets/1345662/19314687/6d771ff8-9071-11e6-8839-713066f11056.gif )
218
219
219
- [ See it] ( http://raphaelfabeni.com.br/css-loader/#/loader-ball ) :metal :
220
+ [ See it] ( http://raphaelfabeni.com.br/css-loader/#/loader-ball ) :metal : | [ CSS ] ( https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-ball.css ) : sparkles :
220
221
221
222
#### Variations
222
223
@@ -230,15 +231,15 @@ Like the `loader` example, it's also possible to pass the `data-text` and `blink
230
231
231
232
[ See it] ( http://raphaelfabeni.com.br/css-loader/#/loader-ball-shadow ) :metal :
232
233
233
- ### Smartphone | [ CSS ] ( https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-smartphone.css ) : sparkles :
234
+ ### Smartphone
234
235
235
236
``` html
236
237
<div class =" loader loader-smartphone is-active" ></div >
237
238
```
238
239
239
240
![ loader-smartphone-empty] ( https://cloud.githubusercontent.com/assets/1345662/19544262/83cd4b42-965c-11e6-9238-91a48f0d5cf5.gif )
240
241
241
- [ See it] ( http://raphaelfabeni.com.br/css-loader/#/loader-smartphone ) :metal :
242
+ [ See it] ( http://raphaelfabeni.com.br/css-loader/#/loader-smartphone ) :metal : | [ CSS ] ( https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-smartphone.css ) : sparkles :
242
243
243
244
#### Variations
244
245
@@ -256,25 +257,25 @@ Like the `loader` example, it's also possible to pass the `data-text` and `blink
256
257
257
258
[ See it] ( http://raphaelfabeni.com.br/css-loader/#/loader-smartphone-text ) :metal :
258
259
259
- ### Clock | [ CSS ] ( https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-clock.css ) : sparkles :
260
+ ### Clock
260
261
261
262
``` html
262
263
<div class =" loader loader-clock is-active" ></div >
263
264
```
264
265
265
266
![ loader-clock] ( https://cloud.githubusercontent.com/assets/1345662/19628192/f09d9a88-9936-11e6-8a2c-de22df0f820b.gif )
266
267
267
- [ See it] ( http://raphaelfabeni.com.br/css-loader/#/loader-clock ) :metal :
268
+ [ See it] ( http://raphaelfabeni.com.br/css-loader/#/loader-clock ) :metal : | [ CSS ] ( https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-clock.css ) : sparkles :
268
269
269
- ### Curtain | [ CSS ] ( https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-curtain.css ) : sparkles :
270
+ ### Curtain
270
271
271
272
``` html
272
273
<div class =" loader loader-curtain is-active" ></div >
273
274
```
274
275
275
276
![ loader-curtain-default] ( https://cloud.githubusercontent.com/assets/1345662/20083193/fd7043fc-a541-11e6-8f86-e08cbb2c02c2.gif )
276
277
277
- [ See it] ( http://raphaelfabeni.com.br/css-loader/#/loader-curtain ) :metal :
278
+ [ See it] ( http://raphaelfabeni.com.br/css-loader/#/loader-curtain ) :metal : | [ CSS ] ( https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-curtain.css ) : sparkles :
278
279
279
280
#### Variations
280
281
@@ -304,14 +305,16 @@ Like the `loader` example, it's also possible to pass the `data-text` and `blink
304
305
<div class =" loader loader-curtain is-active" colorful data-curtain-text =" Hello" ></div >
305
306
```
306
307
307
- ### Music | [ CSS ] ( https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-music.css ) : sparkles :
308
+ ### Music
308
309
309
310
``` html
310
311
<div class =" loader loader-music is-active" data-hey-oh ></div >
311
312
```
312
313
313
314
This loader differs from the other because we have to pass an attribute to it, according to song's chorus that we want to load.
314
315
316
+ [ CSS] ( https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-music.css ) :sparkles :
317
+
315
318
#### Variations
316
319
317
320
** hey-oh** : The classic [ Hey! Oh! Let's Go!] ( https://www.youtube.com/watch?v=xuOnePNlOgY ) from Ramones.
@@ -354,15 +357,15 @@ This loader differs from the other because we have to pass an attribute to it, a
354
357
355
358
[ See it] ( http://raphaelfabeni.com.br/css-loader/#/loader-music-rock-you ) :metal :
356
359
357
- ### Pokeball | [ CSS ] ( https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-pokeball.css ) : sparkles :
360
+ ### Pokeball
358
361
359
362
``` html
360
363
<div class =" loader loader-pokeball is-active" ></div >
361
364
```
362
365
363
366
![ loader-pokeball] ( https://cloud.githubusercontent.com/assets/1345662/22757245/3ddfc9d4-ee31-11e6-97e3-5d7221542e2e.gif )
364
367
365
- [ See it] ( http://raphaelfabeni.com.br/css-loader/#/loader-pokeball ) :metal :
368
+ [ See it] ( http://raphaelfabeni.com.br/css-loader/#/loader-pokeball ) :metal : | [ CSS ] ( https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-pokeball.css ) : sparkles :
366
369
367
370
## Contributing
368
371
0 commit comments