https://github.com/raphaelfabeni/css-loader
Simple loaders for your web applications using only one div and pure CSS :heart:
https://github.com/raphaelfabeni/css-loader
css css-loader loader
Last synced: about 13 hours ago
JSON representation
Simple loaders for your web applications using only one div and pure CSS :heart:
- Host: GitHub
- URL: https://github.com/raphaelfabeni/css-loader
- Owner: raphaelfabeni
- License: gpl-3.0
- Created: 2016-10-16T00:47:40.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-03T03:43:59.000Z (about 2 years ago)
- Last Synced: 2025-04-07T01:04:43.282Z (8 days ago)
- Topics: css, css-loader, loader
- Language: Sass
- Homepage: http://raphaelfabeni.github.io/css-loader
- Size: 992 KB
- Stars: 1,259
- Watchers: 31
- Forks: 145
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-loading-indicators - CSS loader - Simple loaders for your web applications using only one div and pure CSS. (CSS)
- awesome-made-by-brazilians - CSS Loader
README
# CSS loader
[](https://cdnjs.com/libraries/css-loader) [](https://badge.fury.io/js/pure-css-loader) [](https://github.com/raphaelfabeni/css-loader/issues) [](http://hits.dwyl.io/raphaelfabeni/css-loader)
> A few simple examples of loaders using only one `div` and *CSS*.
[Try it online! :metal:](http://www.raphaelfabeni.com.br/css-loader/)
## Why
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.
## toc
* [Install](#install)
* [Setup](#setup)
* [Examples](#examples)
* [default](#default)
* [double](#double)
* [bar](#bar)
* [bar ping pong](#bar-ping-pong)
* [border](#border)
* [ball](#ball)
* [smartphone](#smartphone)
* [clock](#clock)
* [curtain](#curtain)
* [music](#music)
* [pokeball](#pokeball)
* [bouncing](#bouncing)
* [Contributing](#contributing)
* [Browser Support](#browser-support)
## Install
```bash
npm install pure-css-loader
```
Also you can clone the repository or [download the zip file](https://github.com/raphaelfabeni/css-loader/archive/master.zip) and get the main *CSS* file that is located in: `dist/css-loader.css`.
## Thanks
Thanks for all this [amazing people](https://github.com/raphaelfabeni/css-loader/graphs/contributors) who already helped me with the project.
## Setup
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
### Default
```html
```
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-default) :metal: | [CSS](https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-default.css) :sparkles:
#### Variations
**data-text**: add a _Loading_ text to the loader. Just add the `data-text` attribute.
```html
```
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-default-text) :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](http://raphaelfabeni.com.br/css-loader/#/loader-default-blink) :metal:
**half**: a _half_ loader.
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-default-half) :metal:
The variations _data-half_, _data-text_ and _data-blink_ works together. 😄
### Double
```html
```
[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:
```html
```
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-bar) :metal:
#### Variations
Like the `loader` example, it's also possible to pass the `data-text` and `blink` attributes.
```html
```
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-bar-text) :metal:
**rounded**: passing the `data-rounded` attribute, it's possible to add a simple `border-radius` to the loader.
```html
```
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-bar-rounded) :metal:
**inverse**: passing the `data-inverse` attribute, it's possible change the direction of the animation (from left to right).
```html
```
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-bar-inverse) :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.
### Bar Ping Pong
```html
```
[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
**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](http://raphaelfabeni.com.br/css-loader/#/loader-bar-ping-pong-rounded) :metal:
### Border
```html
```
[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
Like the `loader` example, it's also possible to pass the `data-text` and `blink` attributes.
```html
```
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-border-text) :metal:
### Ball
```html
```
[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
**shadow**: a version of the ball with inset shadow.
```html
```
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-ball-shadow) :metal:
### Smartphone
```html
```
[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
**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](http://raphaelfabeni.com.br/css-loader/#/loader-smartphone-text) :metal:
### Clock
```html
```
[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
```html
```
[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
**brazilian**: a simple version using the traditional brazilian green and yellow. :brazil:
```html
```
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-curtain-brazilian) :metal:
**colorful**: a colorful version.
```html
```
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-curtain-colorful) :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
```
### Music
```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](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.
```html
```
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-music-hey-oh) :metal:
**no-cry**: [No woman no cry](https://www.youtube.com/watch?v=x59kS2AOrGM) from Bob Marley.
```html
```
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-music-no-cry) :metal:
**we-are**: [We are the world](https://www.youtube.com/watch?v=x59kS2AOrGM) from Michael Jackson.
```html
```
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-music-we-are) :metal:
**rock-you**: [We will rock you](https://www.youtube.com/watch?v=-tJYN-eG1zk) from Queen.
```html
```
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-music-rock-you) :metal:
### Pokeball
```html
```
[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:
### Bouncing
```html
```
[See it](http://raphaelfabeni.com.br/css-loader/#/loader-bouncing) :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.
6. Open a _PR_ with a new branch describing your changes. | 
| 
| 
| 
| 
|:---:|:---:|:---:|:---:|:---:|:---:|
| 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.
## License
[GPL License](/LICENSE) © Raphael Fabeni