A few simple examples of loaders using only one div and CSS.

Try it online! 🤘

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
• Contributing
• Browser Support

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.

Add the CSS file to your project and add the link to the file:

<link rel="stylesheet" href="path/to/css-loader.css">

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 -->
<div class="loader loader-default"></div>

<!-- Loader active -->
<div class="loader loader-default is-active"></div>

<div class="loader loader-default is-active"></div>

See it 🤘 | CSS ✨

data-text: add a Loading text to the loader. Just add the data-text attribute.

<div class="loader loader-default is-active" data-text></div>

See it 🤘

It's also possible to change the text, just passing a value to the attribute data-text.

<div class="loader loader-default is-active" data-text="Custom text"></div>

blink: passing the data-blink attribute, you can add a simple fade animation to the text loader

<div class="loader loader-default is-active" data-text data-blink></div>

See it 🤘

half: a half loader.

See it 🤘

The variations data-half, data-text and data-blink works together. 😄

<div class="loader loader-double is-active"></div>

See it 🤘 | CSS ✨

<div class="loader loader-bar is-active"></div>

See it 🤘

Like the loader example, it's also possible to pass the data-text and blink attributes.

<div class="loader loader-bar is-active" data-text></div>
<!-- -->
<div class="loader loader-bar is-active" data-inverse></div>
<!-- -->
<div class="loader loader-bar is-active" data-text="Custom text"></div>
<!-- -->
<div class="loader loader-bar is-active" data-text data-blink></div>

See it 🤘

rounded: passing the data-rounded attribute, it's possible to add a simple border-radius to the loader.

<div class="loader loader-bar is-active" data-text data-rounded></div>

See it 🤘

inverse: passing the data-inverse attribute, it's possible change the direction of the animation (from left to right).

<div class="loader loader-bar is-active" data-inverse></div>

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.

<div class="loader loader-bar-ping-pong is-active"></div>

See it 🤘 | CSS ✨

rounded: passing the data-rounded attribute, it's possible to add a border-radius to the bar and the ticker transforms into a circle.

<div class="loader loader-bar-ping-pong is-active" data-rounded></div>

See it 🤘

<div class="loader loader-border is-active"></div>

See it 🤘 | CSS ✨

Like the loader example, it's also possible to pass the data-text and blink attributes.

<div class="loader loader-border is-active" data-text></div>
<!-- -->
<div class="loader loader-border is-active" data-text="Custom text"></div>
<!-- -->
<div class="loader loader-border is-active" data-text data-blink></div>

See it 🤘

<div class="loader loader-ball is-active"></div>

See it 🤘 | CSS ✨

shadow: a version of the ball with inset shadow.

<div class="loader loader-ball is-active" data-shadow></div>

See it 🤘

<div class="loader loader-smartphone is-active"></div>

See it 🤘 | CSS ✨

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 -->
<div class="loader loader-smartphone is-active" data-screen></div>

<!-- custom text -->
<div class="loader loader-smartphone is-active" data-screen="hello"></div>

See it 🤘

<div class="loader loader-clock is-active"></div>

See it 🤘 | CSS ✨

<div class="loader loader-curtain is-active"></div>

See it 🤘 | CSS ✨

brazilian: a simple version using the traditional brazilian green and yellow. 🇧🇷

<div class="loader loader-curtain is-active" data-brazilian></div>

See it 🤘

colorful: a colorful version.

<div class="loader loader-curtain is-active" data-colorful></div>

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.

<div class="loader loader-curtain is-active" colorful data-curtain-text="Hello"></div>

<div class="loader loader-music is-active" data-hey-oh></div>

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 ✨

hey-oh: The classic Hey! Oh! Let's Go! from Ramones.

<div class="loader loader-music is-active" data-hey-oh></div>

See it 🤘

no-cry: No woman no cry from Bob Marley.

<div class="loader loader-music is-active" data-no-cry></div>

See it 🤘

we-are: We are the world from Michael Jackson.

<div class="loader loader-music is-active" data-we-are></div>

See it 🤘

rock-you: We will rock you from Queen.

<div class="loader loader-music is-active" data-rock-you></div>

See it 🤘

<div class="loader loader-pokeball is-active"></div>

See it 🤘 | CSS ✨

<div class="loader loader-bouncing is-active"></div>

See it 🤘

1. Clone this repository.
2. yarn install and yarn serve
3. Open => http://localhost:3000 (if it didn't open automatically)
4. Make your magic contribution.
5. Run yarn build to create/update the dist files.
6. 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.

MIT License © Raphael Fabeni