Google Inspired 4-Dot Loading Indicators In Pure CSS

Category: CSS & CSS3 , Loading | July 25, 2020
Views Total:2,189 views
Official Page:Go to website
Last Update:July 25, 2020


Google Inspired 4-Dot Loading Indicators In Pure CSS


A set of animated, Google inspired, 4-dot loading indicators built using pure CSS.

Animations Included:

How to use it:

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">&nbsp;</div>
    <div class="circle-blue">&nbsp;</div>
    <div class="circle-green">&nbsp;</div>
    <div class="circle-yellow">&nbsp;</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">

You Might Be Interested In:

Leave a Reply