CSS loader
A few simple examples of loaders using only one
div
and CSS.
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
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
Thanks for all this amazing people who already helped me with the project.
Setup
Add the CSS file to your project and add the link to the file:
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.
<!-- Loader --> <!-- Loader active -->
Examples
Default
Variations
data-text: add a Loading text to the loader. Just add the data-text
attribute.
See it 🤘
It's also possible to change the text, just passing a value to the attribute data-text
.
blink: passing the data-blink
attribute, you can add a simple fade animation to the text loader
See it 🤘
half: a half loader.
See it 🤘
The variations data-half, data-text and data-blink works together. 😄
Double
CSS ✨
Bar |
See it 🤘
Variations
Like the loader
example, it's also possible to pass the data-text
and blink
attributes.
<!-- --><!-- --><!-- -->
See it 🤘
rounded: passing the data-rounded
attribute, it's possible to add a simple border-radius
to the loader.
See it 🤘
inverse: passing the data-inverse
attribute, it's possible change the direction of the animation (from left to right).
See it 🤘
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
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.
See it 🤘
Border
Variations
Like the loader
example, it's also possible to pass the data-text
and blink
attributes.
<!-- --><!-- -->
See it 🤘
Ball
Variations
shadow: a version of the ball with inset shadow.
See it 🤘
Smartphone
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).
<!-- default loading text --> <!-- custom text -->
See it 🤘
Clock
Curtain
Variations
brazilian: a simple version using the traditional brazilian green and yellow. 🇧🇷
See it 🤘
colorful: a colorful version.
See it 🤘
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.
Music
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 ✨
Variations
hey-oh: The classic Hey! Oh! Let's Go! from Ramones.
See it 🤘
no-cry: No woman no cry from Bob Marley.
See it 🤘
we-are: We are the world from Michael Jackson.
See it 🤘
rock-you: We will rock you from Queen.
See it 🤘
Pokeball
Bouncing
See it 🤘
Contributing
- Clone this repository.
- Run
yarn install
andyarn start
- Open
http://localhost:3000
. - Make your magic contribution.
- Choose a special name for your loader (
loaders-name-you-want
) and add toloaders.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 insidesrc
folder which is the root style file for the loader and it will import the other files. And the other one, insideloaders
folder with the specific style for the loader (both must have the same name you chose - loader-name-you-chose).
- Run
yarn build
to create/update the dist files. - Open a PR with a new branch describing your changes. <o/
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.
License
MIT License © Raphael Fabeni