Google Inspired 4-Dot Loading Indicators In Pure CSS

Author: akewcrafts
Views Total: 1,099 views
Official Page: Go to website
Last Update: July 25, 2020
License: MIT


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">

See also  How to Move an Element in a Circular Path with CSS Offset-Path (Motion Path)

Leave a Reply

Your email address will not be published. Required fields are marked *