Simple loaders for your web applications using only one div and pure CSS ♥.
npm install pure-css-loader   
> A few simple examples of loaders using only one div and CSS.
It's usually common to show a loader to users when they must wait for something in a web application (an _ajax_ request or a form submit, etc). _Gif_ image loaders were great but by using CSS we can avoid the image request, also it's easier to customise and maintain and it's cooler.
* Install
* Setup
* Examples
* default
* double
* bar
* bar ping pong
* border
* ball
* smartphone
* clock
* curtain
* music
* pokeball
* bouncing
* Contributing
* Browser Support
``bash`
npm install pure-css-loader
Also you can clone the repository or download the zip file and get the main CSS file that is located in: dist/css-loader.css.
Thanks for all this amazing people who already helped me with the project.
Add the CSS file to your project and add the link to the file:
`html`
Select the loader and add the corresponding HTML. In order to show the loader, you need to add the helper CSS class is-active. And to hide the loader, just do the opposite, removing the CSS helper from the loader. You can do it with JavaScript.
`html
Examples
$3
`html
`See it :metal: | CSS :sparkles:
#### Variations
data-text: add a _Loading_ text to the loader. Just add the
data-text attribute.`html
`See it :metal:
It's also possible to change the text, just passing a value to the attribute
data-text.`html
`blink: passing the
data-blink attribute, you can add a simple _fade_ animation to the text loader`html
`See it :metal:
half: a _half_ loader.
See it :metal:
The variations _data-half_, _data-text_ and _data-blink_ works together. 😄
$3
`html
`See it :metal: | CSS :sparkles:
$3
`html
`See it :metal:
#### Variations
Like the
loader example, it's also possible to pass the data-text and blink attributes.`html
`See it :metal:
rounded: passing the
data-rounded attribute, it's possible to add a simple border-radius to the loader.`html
`See it :metal:
inverse: passing the
data-inverse attribute, it's possible change the direction of the animation (from left to right).`html
`See it :metal:
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.$3
`html
`See it :metal: | CSS :sparkles:
#### Variations
rounded: passing the
data-rounded attribute, it's possible to add a border-radius to the bar and the _ticker_ transforms into a circle.`html
`See it :metal:
$3
`html
`See it :metal: | CSS :sparkles:
#### Variations
Like the
loader example, it's also possible to pass the data-text and blink attributes.`html
`See it :metal:
$3
`html
`See it :metal: | CSS :sparkles:
#### Variations
shadow: a version of the ball with inset shadow.
`html
`See it :metal:
$3
`html
`See it :metal: | CSS :sparkles:
#### Variations
w/ screen text: it's possible to pass an attribute to the loader and show a simple text inside the screen. Like the other one, if we only pass the attribute, a default _loading_ text is shown; but you can pass a custom text. Just remember that it can't be a big word (our smartphone screen is small).
`html
`See it :metal:
$3
`html
`See it :metal: | CSS :sparkles:
$3
`html
`See it :metal: | CSS :sparkles:
#### Variations
brazilian: a simple version using the traditional brazilian green and yellow. :brazil:
`html
`See it :metal:
colorful: a colorful version.
`html
`See it :metal:
w/ custom text: it's also possible customize the text loader. It's just pass the data attribute
data-curtain-text with the value desired.`html
`$3
`html
`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 :sparkles:
#### Variations
hey-oh: The classic Hey! Oh! Let's Go! from Ramones.
`html
`See it :metal:
no-cry: No woman no cry from Bob Marley.
`html
`See it :metal:
we-are: We are the world from Michael Jackson.
`html
`See it :metal:
rock-you: We will rock you from Queen.
`html
`See it :metal:
$3
`html
`See it :metal: | CSS :sparkles:
$3
`html
`See it :metal:
Contributing
1. Clone this repository.
2. Run
yarn install and yarn start
3. Open http://localhost:3000.
4. Make your magic contribution.
* Choose a special name for your loader (loaders-name-you-want) and add to loaders.json.
* Create the example file inside the examples folder (uses the loader name you chose). You can copy one of the examples and make the necessary changes.
* Create the .sass files. The first one inside src folder which is the root style file for the loader and it will import the other files. And the other one, inside loaders folder with the specific style for the loader (both must have the same name you chose - _loader-name-you-chose_).
5. Run yarn build` to create/update the dist files.All examples use CSS _animation_ which is supported by most current browsers.
|
|
|
|
|
| 
|:---:|:---:|:---:|:---:|:---:|:---:|
| 43+ ✔ | 16+ ✔ | 10+ ✔ | 30+ ✔ | 9+ ✔ | 5.2+ ✔
Based on _Can i Use_. One thing to note is that the CSS file has no browser prefixes, but you can easily add them and increase the browser support.
MIT License © Raphael Fabeni