Google Loaders Redesign In Pure CSS

Preview:

Description:

A pure CSS library that recreates the Google loading indicators (loaders, loading spinners) with pure CSS/CSS3.

See also:

• 10 Best Loading Spinner/Indicator JavaScript & CSS Libraries

Currently comes with 6 loaders:

How to use it:

Load the bundled CSS ‘style.css’ in the head section of the document.

<link rel="stylesheet" href="style.css">

Or include a loader CSS of your choice in the document.

<link rel="stylesheet" href="/animation-1/style.css">
<link rel="stylesheet" href="/animation-2/style.css">
<link rel="stylesheet" href="/animation-3/style.css">
<link rel="stylesheet" href="/animation-4/style.css">
<link rel="stylesheet" href="/animation-5/style.css">
<link rel="stylesheet" href="/animation-6/style.css">

Create the HTML to hold the Google loaders.

<div class="animation-1">
  <div class="shape shape1"></div>
  <div class="shape shape2"></div>
  <div class="shape shape3"></div>
  <div class="shape shape4"></div>
</div>
<div class="animation-2">
  <div class="shape shape1"></div>
  <div class="shape shape2"></div>
  <div class="shape shape3"></div>
  <div class="shape shape4"></div>
</div>
<div class="animation-3">
  <div class="shape shape1"></div>
  <div class="shape shape2"></div>
  <div class="shape shape3"></div>
  <div class="shape shape4"></div>
</div>
<div class="animation-4">
  <div class="shape shape1"></div>
  <div class="shape shape2"></div>
  <div class="shape shape3"></div>
  <div class="shape shape4"></div>
</div>
<div class="animation-5">
  <div class="shape shape1"></div>
  <div class="shape shape2"></div>
  <div class="shape shape3"></div>
  <div class="shape shape4"></div>
</div>
<div class="animation-6">
  <div class="shape shape1"></div>
  <div class="shape shape2"></div>
  <div class="shape shape3"></div>
  <div class="shape shape4"></div>
</div>