JSFiddle - React, Tailwind, and code Playground

by rgthree

HTML

<div class="container">
  <span class="gloader"></span>
</div>

CSS

/* Added for Demo */
.container {padding:25px; font-size:72px; text-align:center;}
/**
 * Google/Gmail's 3D Loader in Pure CSS
 * https://github.com/rgthree/google-loader-css
 * Regis Gaughan, III <http://regisgaughan.com>
 * MIT License
 *
 * Version: Bleeding
 * Browser Support: https://github.com/rgthree/google-loader-css/blob/master/README.md
 * Demo: http://jsfiddle.net/gh/get/library/pure/rgthree/google-loader-css/tree/master/jsfiddle-bleeding
 * Usage:
 *  - Add this file to the <head> of your webpage
 *  - Within the <body>, add this snippet:
 *
 *    <span class="gloader"></span>
 *
 *  - The gloader uses font-size and text-align to align itself.
 *    For instance, if you place it within a `.container` element
 *    with a `font-size:48px; text-align:center;` the gloader would
 *    be 48px in diameter and aligned in the middle of you container
 *    along with other inline/inline-block elements
 *    
 */

.gloader {
  display:inline-block; width:1em; height:1em;
  position:relative; overflow:hidden; border-radius:0.5em; 
  -webkit-animation:base 2.5s steps(1) 0s infinite;
  animation:base 2.5s steps(1) 0s infinite; 
}

.gloader::before, .gloader::after {
  content:' '; display:block; width:50%; height:100%; overflow:hidden;
  position:absolute; top:0%; left:50%; z-index:1; border-radius:0em 0.5em 0.5em 0em;
  -webkit-transform-origin:0px 50%;
  transform-origin:0px 50%;
}

.gloader::before {
  z-index:2;
  -webkit-transform-style:preserve-3d;
  -webkit-animation:flip 2.5s linear 0s infinite;
  transform-style:preserve-3d;
  animation:flip 2.5s linear 0s infinite;
}

.gloader::after {
  -webkit-animation:reveal 2.5s steps(1) 0s infinite;
  animation:reveal 2.5s steps(1) 0s infinite;
}

/* Webkit Animations; Copy from standard animations below and add "-webkit-" prefix to keyframes and transforms */
@-webkit-keyframes base {
  0%   {-webkit-transform:rotate(0deg);   background-color:#21aa29;}
  25%  {-webkit-transform:rotate(90deg); ...