CSS Loading Animation is a set of pretty cool loading animations that can be used as loading spinners when loading content into a document.
Must Read: A Simple Infinite Image Carousel Using Pure Javascript
How to make use of it:
1. Add the loader to the webpage.
<!-- SPINNER WITH LOGO --> <div class="loading-wrapper"> <div class="loading-devover"> </div> <div class="img"> // Add Image Here </div> </div> <!-- VERTICAL BARS --> <div class="loading-wrapper d-flex align-items-center justify-content-center"> <div class="loading-bar"></div> </div> <!-- HORIZONTAL BARS --> <div class="loading-wrapper2"> <div class="loading-bar1"></div> <div class="loading-bar2"></div> <div class="loading-bar3"></div> </div> <!-- WATER FILLING --> <div class="loading-wrapper"> <div class="loading-pouring"> </div> </div> <!-- LOGO BOUNCING --> <div class="loading-wrapper d-flex justify-content-center"> <div class="loading-bouncing "> // Add Image Here </div> </div> <!-- PULSE --> <div class="loading-wrapper d-flex justify-content-center align-items-center"> <div class="loading-pulse "> // Add Image Here </div> </div>
Must Read: Realistic IOS Web Based in Pure CSS / HTML | Web iOS Mockup
See Demo And Download
Official Website(zuramai): Click Here
This superior jQuery/javascript plugin is developed by zuramai. For extra Advanced Usage, please go to the official website.