Simple Cross-Browser Pure CSS Loading Animations – whirl.css

Category: CSS & CSS3 , Loading | September 23, 2016
Views Total:2,699 views
Official Page:Go to website
Last Update:September 23, 2016


Simple Cross-Browser Pure CSS Loading Animations – whirl.css


whirl.css is a lightweight CSS library helps you create a variety of loading animations (loading spinners) using pure CSS/CSS3. Also comes with a loading overlay covering the target area.

Basic Usage:

All you need is to include the whirl.css into your document’s head section:

<link href="dist/whirl.css" rel="stylesheet">

And then add the essential CSS class  ‘whirl’ to an Html element, along with any of the animation names.

<div class="whirl duo">

Supported loading animations.

  • traditional
  • duo
  • double-up
  • sphere
  • sphere-vertical
  • bar
  • bar-follow
  • line
  • line grow
  • line back-and-forth
  • shadow
  • shadow oval/shadow oval left
  • shadow oval right
  • ringed
  • blade
  • helicopter



  • v0.0.16

You Might Be Interested In:

Leave a Reply