6 Loading Animations In Pure CSS

Just another set of 6 pretty cool loading animations that can be used as loading spinners while loading content in the document. Written in pure CSS/CSS3.

Loading Animations Included:

• Spinner With Logo
• Vertical Bars
• Horizontal Bars
• Water Filling
• Pulse
• Logo Bouncing

How to use it:

1. Insert loader’s CSS styles into your document. You can find all loaders in the style.css.

2. Add the loader to the webpage. That’s it.

<!-- SPINNER WITH LOGO -->
<div class="loading-wrapper">
  <div class="loading-devover">
  </div>
  <div class="img">
    <img src="assets/favicon.png" alt="" srcset="">
  </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 ">
     <img src="assets/favicon.png" alt="" srcset="">
  </div>
</div>
<!-- PULSE -->
<div class="loading-wrapper d-flex justify-content-center align-items-center">
  <div class="loading-pulse ">
    <img src="assets/favicon.png" alt="" srcset="">
  </div>
</div>