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

Category: CSS & CSS3 , Loading | September 23, 2016
Author: jh3y
Views Total: 4,787
Official Page: Go to website
Last Update: September 23, 2016
License: MIT

Preview:

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

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

You Might Be Interested In:


Leave a Reply