<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300" />
<style>
/* WordPress original style */
.spinner {
  /* the actual path is ../images/spinner.gif */
  background: url(https://svn.automattic.com/wordpress/trunk/wp-admin/images/spinner.gif) no-repeat;
  -webkit-background-size: 20px 20px;
  background-size: 20px 20px;
  display: none;
  float: right;
  opacity: 0.7;
  filter: alpha(opacity=70);
  width: 20px;
  height: 20px;
  margin: 2px 5px 0;
}
</style>
<style>h1{margin-top: 100px}h2{margin:50px 0 10px}h1,h2,button{font-family:Open Sans;text-align:center;font-weight:300}button,.spinner{margin:10px auto;display:block;float:none}</style>


  <h1>WordPress CSS Spinner</h1>
  <h2>CSS only</h2>
  <div class="spinner"></div>
  <button onclick="var d=document.documentElement;p='className';c='cssanimations';n='no-'+c;d[p]=(d[p].replace(' ','')===n)?c:n;console.log(d[p],n,c)">Toggle Gif fallback</button>
<center>The aim is to do not have differences while toggling the gif fallback</center>
 
@import "compass/css3";

/*!
 * WordPress CSS Spinner
 * @license GPL-2.0+
 * @author kuus <kunderikuus@gmail.com> (https://kuus.github.io)
 */

$wp-spinner-bg: #808080;
$wp-spinner-fg: #fff;
$wp-spinner-size: 18px;
$wp-spinner-size-inner: 4px;
$wp-spinner-anim-duration: 1.08s;


@keyframes infinite-spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  .cssanimations & {
    position: relative;
    width: $wp-spinner-size;
    height: $wp-spinner-size;
    border-radius: $wp-spinner-size;
    background: $wp-spinner-bg;
    animation: infinite-spinning $wp-spinner-anim-duration linear infinite;
    
    &:after {
      content: "";
      position: absolute;
      top: 2px;
      left: 50%;
      width: $wp-spinner-size-inner;
      height: $wp-spinner-size-inner;
      border-radius: $wp-spinner-size-inner;
      margin-left: -($wp-spinner-size-inner / 2);
      background: $wp-spinner-fg;
    }
  }
}
View Compiled
/**
 * WordPress CSS Spinner
 * CSS Animations support test
 * From modernizr and MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations/Detecting_CSS_animation_support
 *
 */
(function (document) {
  var animation = false,
      animationstring = 'animation',
      keyframeprefix = '',
      domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
      pfx  = '',
      docElement = document.documentElement,
      modElem = document.createElement('modernizr');

  if (modElem.style.animationName !== undefined)  { 
    animation = true;
  }

  if (animation === false) {
    for (var i = 0; i < domPrefixes.length; i++) {
      if (modElem.style[ domPrefixes[i] + 'AnimationName' ] !== undefined) {
        pfx = domPrefixes[ i ];
        animationstring = pfx + 'Animation';
        keyframeprefix = '-' + pfx.toLowerCase() + '-';
        animation = true;
        break;
      }
    }
  }
  docElement.className += ' ' + (animation ? '' : 'no-') + 'cssanimations';
})(document);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js