6 Loading Animations In Pure CSS

Category: CSS & CSS3 , Loading | October 19, 2020
Author:zuramai
Views Total:2,744 views
Official Page:Go to website
Last Update:October 19, 2020
License:MIT

Preview:

6 Loading Animations In Pure CSS

Description:

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>

You Might Be Interested In:


Leave a Reply