Pure CSS Single Element Loading Indicator Collection – text-spinners

Preview:

Description:

text-spinners is a collection of 29+ CSS/CSS3 powered single element loading indicator for ajax requests and/or asynchronous operations.

How to use it:

Load the core CSS file spinners.css in the document and we’re ready to go.

<link rel="stylesheet" href="spinners.css">

Add the CSS class ‘loading’ to any element where you want to place the loading indicator.

<span class="loading"></span>

That’s it. This is will display a default ‘Ellip’ loading effect inside the span element. Here is a list of CSS classes from which you can choose the loading effects.

• Ellip (default)
• Dots
• Dots2
• Dots3
• Line
• Line2
• Plus
• Lifting
• Hamburger
• Bar
• Bar2
• Circle
• Open-circle
• Arrow
• Triangle
• Triangles
• Beam
• Bullet
• Bullseye
• Rhomb
• Fish
• Toggle
• Countdown
• Time
• Hearts
• Earth
• Moon
• Monkey
• Words

<span class="loading dots"></span>