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

Preview:

Description:

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">
  ...
</div>

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

Changelog:

09/23/2016

• v0.0.16