diff --git a/README.md b/README.md index fa7f787..a2d3e05 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,7 @@ It's usually common to show a loader to users when they must wait for something * [default](#default) * [double](#double) * [bar](#bar) + * [bar ping pong](#bar-ping-pong) * [border](#border) * [ball](#ball) * [smartphone](#smartphone) @@ -56,7 +57,7 @@ Select the loader and add the corresponding HTML. In order to show the loader, y ## Examples -### Default | [CSS](https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-ball.css) :sparkles: +### Default ```html
@@ -64,7 +65,7 @@ Select the loader and add the corresponding HTML. In order to show the loader, y ![loader](https://cloud.githubusercontent.com/assets/1345662/19313531/2c715f18-906d-11e6-856a-17ca264112de.gif) -[See it](http://raphaelfabeni.com.br/css-loader/#/loader-default) :metal: +[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: #### Variations @@ -104,7 +105,7 @@ It's also possible to change the text, just passing a value to the attribute `da The variations _data-half_, _data-text_ and _data-blink_ works together. 😄 -### Double | [CSS](https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-double.css) :sparkles: +### Double ```html @@ -112,7 +113,7 @@ The variations _data-half_, _data-text_ and _data-blink_ works together. 😄 ![loader-double](https://cloud.githubusercontent.com/assets/1345662/19314508/c2279a06-9070-11e6-8079-4fa82b5f2610.gif) -[See it](http://raphaelfabeni.com.br/css-loader/#/loader-double) :metal: +[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: ### Bar | [CSS](https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-bar.css) :sparkles: @@ -162,7 +163,7 @@ Like the `loader` example, it's also possible to pass the `data-text` and `blink *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. -### Bar Ping Pong | [CSS](https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-bar-ping-pong.css) :sparkles: +### Bar Ping Pong ![loader-bar-ping-pong](https://cloud.githubusercontent.com/assets/1345662/23591096/deed9e04-01c9-11e7-9d5f-356fa249ff00.gif) @@ -170,7 +171,7 @@ Like the `loader` example, it's also possible to pass the `data-text` and `blink ``` -[See it](http://raphaelfabeni.com.br/css-loader/#/loader-bar-ping-pong) :metal: +[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: #### Variations @@ -184,7 +185,7 @@ Like the `loader` example, it's also possible to pass the `data-text` and `blink [See it](http://raphaelfabeni.com.br/css-loader/#/loader-bar-ping-pong-rounded) :metal: -### Border | [CSS](https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-border.css) :sparkles: +### Border ![loader-border](https://cloud.githubusercontent.com/assets/1345662/19314686/6d733622-9071-11e6-8167-a55e6c16a02f.gif) @@ -192,7 +193,7 @@ Like the `loader` example, it's also possible to pass the `data-text` and `blink ``` -[See it](http://raphaelfabeni.com.br/css-loader/#/loader-border) :metal: +[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: #### Variations @@ -208,7 +209,7 @@ Like the `loader` example, it's also possible to pass the `data-text` and `blink [See it](http://raphaelfabeni.com.br/css-loader/#/loader-border-text) :metal: -### Ball | [CSS](https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-ball.css) :sparkles: +### Ball ```html @@ -216,7 +217,7 @@ Like the `loader` example, it's also possible to pass the `data-text` and `blink ![loader-ball](https://cloud.githubusercontent.com/assets/1345662/19314687/6d771ff8-9071-11e6-8839-713066f11056.gif) -[See it](http://raphaelfabeni.com.br/css-loader/#/loader-ball) :metal: +[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: #### Variations @@ -230,7 +231,7 @@ Like the `loader` example, it's also possible to pass the `data-text` and `blink [See it](http://raphaelfabeni.com.br/css-loader/#/loader-ball-shadow) :metal: -### Smartphone | [CSS](https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-smartphone.css) :sparkles: +### Smartphone ```html @@ -238,7 +239,7 @@ Like the `loader` example, it's also possible to pass the `data-text` and `blink ![loader-smartphone-empty](https://cloud.githubusercontent.com/assets/1345662/19544262/83cd4b42-965c-11e6-9238-91a48f0d5cf5.gif) -[See it](http://raphaelfabeni.com.br/css-loader/#/loader-smartphone) :metal: +[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: #### Variations @@ -256,7 +257,7 @@ Like the `loader` example, it's also possible to pass the `data-text` and `blink [See it](http://raphaelfabeni.com.br/css-loader/#/loader-smartphone-text) :metal: -### Clock | [CSS](https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-clock.css) :sparkles: +### Clock ```html @@ -264,9 +265,9 @@ Like the `loader` example, it's also possible to pass the `data-text` and `blink ![loader-clock](https://cloud.githubusercontent.com/assets/1345662/19628192/f09d9a88-9936-11e6-8a2c-de22df0f820b.gif) -[See it](http://raphaelfabeni.com.br/css-loader/#/loader-clock) :metal: +[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: -### Curtain | [CSS](https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-curtain.css) :sparkles: +### Curtain ```html @@ -274,7 +275,7 @@ Like the `loader` example, it's also possible to pass the `data-text` and `blink ![loader-curtain-default](https://cloud.githubusercontent.com/assets/1345662/20083193/fd7043fc-a541-11e6-8f86-e08cbb2c02c2.gif) -[See it](http://raphaelfabeni.com.br/css-loader/#/loader-curtain) :metal: +[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: #### Variations @@ -304,7 +305,7 @@ Like the `loader` example, it's also possible to pass the `data-text` and `blink ``` -### Music | [CSS](https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-music.css) :sparkles: +### Music ```html @@ -312,6 +313,8 @@ Like the `loader` example, it's also possible to pass the `data-text` and `blink 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. +[CSS](https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-music.css) :sparkles: + #### Variations **hey-oh**: The classic [Hey! Oh! Let's Go!](https://www.youtube.com/watch?v=xuOnePNlOgY) from Ramones. @@ -354,7 +357,7 @@ This loader differs from the other because we have to pass an attribute to it, a [See it](http://raphaelfabeni.com.br/css-loader/#/loader-music-rock-you) :metal: -### Pokeball | [CSS](https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-pokeball.css) :sparkles: +### Pokeball ```html @@ -362,7 +365,7 @@ This loader differs from the other because we have to pass an attribute to it, a ![loader-pokeball](https://cloud.githubusercontent.com/assets/1345662/22757245/3ddfc9d4-ee31-11e6-97e3-5d7221542e2e.gif) -[See it](http://raphaelfabeni.com.br/css-loader/#/loader-pokeball) :metal: +[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: ## Contributing