Pure CSS Single Element Loading Indicator Collection – text-spinners

Category: CSS & CSS3 , Loading , Recommended | September 29, 2016
Author: tawian
Views Total: 2,431
Official Page: Go to website
Last Update: September 29, 2016
License: MIT

Preview:

Pure CSS Single Element Loading Indicator Collection – text-spinners

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>

You Might Be Interested In:


Leave a Reply