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.