Google Inspired 4-Dot Loading Indicators In Pure CSS

Preview:

Description:

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

Animations Included:

• Bounce (Demo)
• Disappear (Demo)
• Growth (Demo)
• Shrink (Demo)
• Waves (Demo)
• Square Rotate (Demo)
• Square (Demo)
• Switch (Demo)

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