A set of animated, Google inspired, 4-dot loading indicators built using pure CSS.
1. Create the HTML for the 4-dot loading indicator. Add dark/white class name to change the background.
<div class="overflow dark" id="preload">
<div class="circle-line">
<div class="circle-red"> </div>
<div class="circle-blue"> </div>
<div class="circle-green"> </div>
<div class="circle-yellow"> </div>
</div>
</div>
2. Include an animation CSS of your choice on the webpage. That’s it.
<link rel="stylesheet" href="4circle-line-bounce/style.css">
<link rel="stylesheet" href="4circle-line-disappear/style.css">
<link rel="stylesheet" href="4circle-line-growth/style.css">
<link rel="stylesheet" href="4circle-line-shrink/style.css">
<link rel="stylesheet" href="4circle-line-waves/style.css">
<link rel="stylesheet" href="4circle-square-rotate/style.css">
<link rel="stylesheet" href="4circle-square/style.css">
<link rel="stylesheet" href="4circle-switch/style.css">
Author: akewcrafts
GitHub: https://github.com/akewcrafts/4circle-preloader
#css #programming