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.