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

Author: jh3y
Views Total: 2,387 views
Official Page: Go to website
Last Update: September 23, 2016
License: MIT


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



See also  Pure CSS/SCSS Tooltip Library - Tooltip UI

Leave a Reply

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