Pure CSS Single Element Loading Indicator Collection – text-spinners

Author: tawian
Views Total: 718 views
Official Page: Go to website
Last Update: September 29, 2016
License: MIT


Pure CSS Single Element Loading Indicator Collection – text-spinners


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>

See also  Minimal Responsive Grid Layout System with Pure CSS - Lemonade.css

Leave a Reply

Your email address will not be published. Required fields are marked *