Press "Enter" to skip to content

Pure CSS Cross-Browser Loading Animations | whirl.css

Whirl is a CSS animation loading manipulation (whirls! 😅). It started as a drop into a CSS file for easy animations with: pseudo-elements. It also comes with a loading overlay that covers the target area.

loading animation download, loading animations free, loading animations css, cool loading animations

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

Created Simulates Inspired Loading Animation Effect In JavaScript | Atom.io

How to make use of it:

All you need is to include whirl.css in the header section of your document:

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

Then add the base CSS class “whirl” to the HTML element, along with any of the animation’s names.

<div class="whirl duo">
  ...
</div>

Simple Cross-Browser Pure CSS Loading Animations, whirl.css Plugin/Github


See Demo And Download

Official Website(jh3y): Click Here

This superior jQuery/javascript plugin is developed by jh3y. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

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