Skip to content

Simple loaders for your web applications using only one div and pure CSS ❤️

Notifications You must be signed in to change notification settings

kristoff2016/css-loader

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

CSS loader

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

loader-g

Try it online! 🤘

Why

Usually it's common to show a loader to the users when they must wait something in a web application (an ajax request or a form submit, etc). _Gif_image loaders was great but using CSS we can avoid the image request, also it's easier for customise and maintain and it's more cool.

toc

Install

npm install pure-css-loader

Also you can clone the repository or download the zip file and get main CSS file that it's located in: dist/css-loader.css.

Setup

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

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

Select the loader and add the HTML corresponding to it, To show the loader, you need to add the helper css class is-active. And to hide the loader, it's just follow the inverse, 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 🤘

Variations

data-text: it's to add a Loading text into 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 blink attribute, you can add a simple fade animation to the text loader

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

loader-blink

See it 🤘

half: a half loader.

loader-half

See it 🤘

They variations half, data-text and blink work together. 😄

Double

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

loader-double

See it 🤘

Bar

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

loader-bar

See it 🤘

Variations

Like the loader example, it's also possible 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-text="Custom text"></div>
<!-- -->
<div class="loader loader-bar is-active" data-text blink></div>

See it 🤘

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

loader-bar-rounded

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

See it 🤘

Border

loader-border

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

See it 🤘

Variations

Like the loader example, it's also possible 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 blink></div>

See it 🤘

Ball

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

loader-ball

See it 🤘

Variations

shadow: a version of the ball with inset shadow.

loader-ball-shadow

See it 🤘

Smartphone

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

loader-smartphone-empty

See it 🤘

Variations

w/ screen text: it's possible to pass an attribute to loader and show a simple text inside the screen. Like the others one, if we only pass the attribute, a default loading text shows; but you can pass a custom text. Just remember that 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 🤘

Contributing

  1. Clone this repository.
  2. npm install and gulp
  3. Open => http://localhost:300
  4. Make your magic contribution.
  5. 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 the CSS file has no browsers prefixes, but you can easily add and increase the support of the browsers.

Licence

MIT License © Raphael Fabeni

About

Simple loaders for your web applications using only one div and pure CSS ❤️

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CSS 88.1%
  • JavaScript 11.9%