Author: | Amine Bahmed |
---|---|
Views Total: | 2,921 views |
Official Page: | Go to website |
Last Update: | July 2, 2018 |
License: | MIT |
Preview:

Description:
A pure CSS library that recreates the Google loading indicators (loaders, loading spinners) with pure CSS/CSS3.
See also:
Currently comes with 6 loaders:
How to use it:
Load the bundled CSS ‘style.css’ in the head section of the document.
<link rel="stylesheet" href="style.css">
Or include a loader CSS of your choice in the document.
<link rel="stylesheet" href="/animation-1/style.css"> <link rel="stylesheet" href="/animation-2/style.css"> <link rel="stylesheet" href="/animation-3/style.css"> <link rel="stylesheet" href="/animation-4/style.css"> <link rel="stylesheet" href="/animation-5/style.css"> <link rel="stylesheet" href="/animation-6/style.css">
Create the HTML to hold the Google loaders.
<div class="animation-1"> <div class="shape shape1"></div> <div class="shape shape2"></div> <div class="shape shape3"></div> <div class="shape shape4"></div> </div> <div class="animation-2"> <div class="shape shape1"></div> <div class="shape shape2"></div> <div class="shape shape3"></div> <div class="shape shape4"></div> </div> <div class="animation-3"> <div class="shape shape1"></div> <div class="shape shape2"></div> <div class="shape shape3"></div> <div class="shape shape4"></div> </div> <div class="animation-4"> <div class="shape shape1"></div> <div class="shape shape2"></div> <div class="shape shape3"></div> <div class="shape shape4"></div> </div> <div class="animation-5"> <div class="shape shape1"></div> <div class="shape shape2"></div> <div class="shape shape3"></div> <div class="shape shape4"></div> </div> <div class="animation-6"> <div class="shape shape1"></div> <div class="shape shape2"></div> <div class="shape shape3"></div> <div class="shape shape4"></div> </div>