Google Loaders Redesign In Pure CSS


Author: Amine Bahmed
Views Total: 2,767 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>

See also  Simple Responsive Fluid Grid System With Pure CSS - ungrid.css

Leave a Reply

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