/css-loader

Simple loaders for your web applications using only one div and pure CSS :heart:

Primary LanguageCSS

CSS loader

CDNJS

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

loader-g

Try it online! 🤘

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:

<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>

Examples

Default

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

loader

See it 🤘 | CSS ✨

Variations

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>

loader-data-text

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>

loader-data-text-custom

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>

loader-blink

See it 🤘

half: a half loader.

loader-half

See it 🤘

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

Double

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

loader-double

See it 🤘 | CSS ✨

Bar | CSS ✨

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

loader-bar-updated

See it 🤘

Variations

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.

loader-bar-rounded-updated

<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).

loader-bar

<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.

Bar Ping Pong

loader-bar-ping-pong

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

See it 🤘 | CSS ✨

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.

loader-bar-ping-pong-rounded

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

See it 🤘

Border

loader-border

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

See it 🤘 | CSS ✨

Variations

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 🤘

Ball

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

loader-ball

See it 🤘 | CSS ✨

Variations

shadow: a version of the ball with inset shadow.

loader-ball-shadow

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

See it 🤘

Smartphone

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

loader-smartphone-empty

See it 🤘 | CSS ✨

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

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

loader-smartphone

See it 🤘

Clock

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

loader-clock

See it 🤘 | CSS ✨

Curtain

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

loader-curtain-default

See it 🤘 | CSS ✨

Variations

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

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

loader-curtain-br

See it 🤘

colorful: a colorful version.

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

loader-curtain-color

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>

Music

<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 ✨

Variations

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

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

loader-music-hey-oh

See it 🤘

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

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

loader-music-no-woman

See it 🤘

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

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

loader-music-we-are

See it 🤘

rock-you: We will rock you from Queen.

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

loader-music-we-will

See it 🤘

Pokeball

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

loader-pokeball

See it 🤘 | CSS ✨

Bouncing

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

loader-bouncing

See it 🤘

Contributing

  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. 4.1. Choose a special name for your loader (loaders-name-you-want) and add to loaders.json. 4.2. Creates 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. 4.3. Creates 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. <o/

Browser Support

All examples use CSS animation which is supported by most current browsers.

Chrome logo Firefox logo Internet Explorer logo Opera logo Safari logo Android Browser Logo
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