<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);
This Pen doesn't use any external CSS resources.