Single Div CSS Loading Spinners – css-loader

Preview:

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:

07/04/2019

• v3.3.3: Fixes security warnings.

05/16/2019

• v3.3.2

09/14/2018

• Added more animations