Google Loaders Redesign In Pure CSS

Category: CSS & CSS3 , Loading , Recommended | July 2, 2018
Author:Amine Bahmed
Views Total:2,921 views
Official Page:Go to website
Last Update:July 2, 2018
License:MIT

Preview:

Google Loaders Redesign In Pure CSS

Description:

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

See also:

Currently comes with 6 loaders:

Google Loaders Redesign In Pure CSS

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>

You Might Be Interested In:


Leave a Reply