raphaelfabeni/css-loader

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

CSS loader

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

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
• Setup
• Examples
  • default
  • double
  • bar
  • bar ping pong
  • border
  • ball
  • smartphone
  • clock
  • curtain
  • music
  • pokeball
  • bouncing
• Contributing
• Browser Support

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>

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>

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

Double

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

See it 🤘 | CSS ✨

Bar | CSS ✨

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

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.

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

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.

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

See it 🤘

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>

See it 🤘 | CSS ✨

Variations

shadow: a version of the ball with inset shadow.

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

See it 🤘

Smartphone

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

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>

See it 🤘

Clock

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

See it 🤘 | CSS ✨

Curtain

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

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>

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>

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>

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 🤘

Pokeball

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

See it 🤘 | CSS ✨

Bouncing

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

See it 🤘

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

GPL License © Raphael Fabeni

css-loader's Issues

Separated file for config variables

All the variables are inside each .sass file. I think it would be better if we have a separated file, like a config.sass with all the variables for loaders.

Consider progress stripe animation direction to move backwards.

I read this recently http://ux.stackexchange.com/questions/18361/why-do-progress-bars-animate-backwards

I wondered why Bootstrap had it moving backwards as well as other progress bars that I have encountered. It seems like moving to the left is the default direction in many places. I only learned of it recently and thought it was something to consider. Not an issue, per se. Apologies if this isn't the right place for it.

Excellent work so far!

Edit: Just realized that these loaders were indeterminate, so it may not apply.

Change the attributes to data-*

As mentioned by @lucasmazza, the markup of the project is not valid due to use of attributes without data prefix. So we need to change every attribute to data-attribute.

Documentation of how customize the loaders

For me of course that is simple to customize the loaders but it must have a simple and directly explanation/example of how to customize the colors and the sizes of loaders.

Add a License file!

Hello!
It is very important for other people to use your library if your project have a License file.
I suggest some GPL-based license! If you want I can make a pull request.

Single Div Loading

There is a easy way that the amazing css loaders in this library can be adapted for single div use cases with the use of html5 iframes. For my own use and addressing issues such as #40 which many beginners may have, I think it would be beneficial to add to the readme some documentation about embedding a barebones html page into an iframe for the said use case.

furthermore, the pre existing examples make this very easy to make a part of the library by just removing the container class divs, and adding directives in the readme to use iframes like so:

<iframe src="/examples/loader-ball.html" ></iframe>

I would be happy to submit a pr with these changes.

Create separate files for each loader

Currently we have only one .css in the dist folder with all loaders styles. Maybe, we could have this file and one for each loader.

loader-default not working with repo compiled css

If copy-paste the compiled css in this repo:

• loader-default not working https://jsbin.com/yugutuzuda/edit?html,output

• loader-double works fine https://jsbin.com/xaqezoqece/edit?html,output

I didn't try all the other.

Loading in DIV

I really enjoyed your project.
I would like to show loading in only one div and not on every page.

How does this work with npm?

I installed with npm but there is no css file in dist.
I tried requiring but that did nothing either.
How do I load the css into the page?

Add lint

As a result of a fast and simple MVP the project has no test yet. There is already the task configured (not so well) in gulpfile.js only waiting the tests.

Table of content

As our README is getting bigger, I think a good idea would be add a simple table of contents in the beginning of the file.

[suggestion] add loader just to corners

Hello @raphaelfabeni, how are you?

First, congratulations for your effort to keep on this project.

I would like to suggest an idea about loader border.
For now, exist an example to loader border, but I think it's important able to run loader just on corner of page (top, right, bottom, left)...

I edited your loaders/_loader-border.sass file's and this is my poor implementation of (loader corner top):

@keyframes corners 
  6%
    width: $loader-border--width * 4
    height: $loader-border--height

  25%
    width: $loader-border--width
    height: $loader-border--height
    left: calc(100% - #{$loader-border--width})

  50%
    height: $loader-border--height
    left: calc(100% - #{$loader-border--width})

  75%
    width: $loader-border--width
    left: 0

See it bellow...

Loader aberto sem a classe is-active

Fala @raphaelfabeni, beleza?
Coloquei a DIV sem a classe is-active e ela mesmo assim fica sendo mostrada na cor branca(foto), quando eu adiciono a classe is-active ela funciona tudo certo.

Precisei usar opacity, mas está ai haha
Muito bom o loader, valeu!

Browser: Chrome

Using JS to dynamically update the data-text attribute

Is there a way I can update the data-text attribute dynamically? There are certain instances where I want to add a custom message depending on what action is taking place.

I have tried something like this:

$('#appLoader').addClass('loader loader-default is-active').data('text', 'Fetching Results');

But it does not seem to be working... Any ideas?

Discussion about structure

I thought a little bit about how the best way to structure the project but as I really wanted to have something online fast, I didn't put a lot of effort thinking about it.

Currently, we need to have something like to this to have the loader:

<!-- Initial state -->
<div class="loader loader-bar"></div>

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

In a first draft, I thought about having just one class without the loader but thinking like that each class of type of loader would repeat the default style of basic loader. So I decided to have class for it. I don't know if it's the best approach, but it's a first version. 😆

Is it possible to use with React Native?

Can you provide a quick example if possible? Thanks

Border option don't work on IE EDGE

The border option of the loader it's not working well on IE EDGE.

I attach a gif showing the problem.