Single Div CSS Loading Spinners – css-loader

Category: CSS & CSS3 , Loading | September 14, 2018
Author: raphaelfabeni
Views Total: 4,609
Official Page: Go to website
Last Update: September 14, 2018
License: MIT

Preview:

Single Div CSS Loading Spinners – css-loader

Description:

css-loader is a set of loading indicators/spinners built using a single DIV element and pure CSS/CSS3.

Useful to notify you of current loading state during a specific call to and from the server.

How to use it:

Download and insert the main stylesheet css-loader.css into the head section of the document.

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

Create a DIV element to place the loading spinner.

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

Specify the loading text.

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

Blink the loading text.

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

Apply more animations to the loading spinner by overriding the ‘loader-default’ class with follows:

  • double
  • bar
  • bar ping pong
  • border
  • ball
  • smartphone
  • clock
  • curtain
  • music
  • pokeball
  • bouncing

Changelog:

09/14/2018

  • Added more animations

One thought on “Single Div CSS Loading Spinners – css-loader

Leave a Reply