SpinKit
Testing SpinKit's IE9 fallback
<html>
<html> <head><title>Rotating Plane</title>
<script type="text/javascript" src="//code.jquery.com/jquery-2.0.3.min.js"></script>
</head> <body><div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div> </body></html>body {
body {background: #555;
}
.spinner {margin: 100px auto 0;
width: 70px;
text-align: center;
transform:scale(50%);
}
.spinner > div {
width: 18px;
height: 18px;
background-color: #333;
border-radius: 100%;
display: inline-block;
animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .bounce1 {
animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { transform: scale(0.0) }
40% { transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
transform: scale(0.0);
} 40% {transform: scale(1.0);
transform: scale(1.0);
}
}
function browserSupportsCSSProperty(propertyName) {
function browserSupportsCSSProperty(propertyName) {
var elm = document.createElement('div');
propertyName = propertyName.toLowerCase();
if (elm.style[propertyName] != undefined)
return true;
var propertyNameCapital = propertyName.charAt(0).toUpperCase() + propertyName.substr(1),
domPrefixes = 'Webkit Moz ms O'.split(' ');
for (var i = 0; i < domPrefixes.length; i++) {
if (elm.style[domPrefixes[i] + propertyNameCapital] != undefined)
return true;
}
return false;
}
if (!browserSupportsCSSProperty('animation')) {
$('.bounce1, .bounce2, .bounce3').hide();
$('.spinner').css({
'background':'transparent url(https://dl.dropboxusercontent.com/u/11510916/fiddles/spinkit/spinner-fallback.gif) no-repeat',
'background-size':'70% 70%',
'height':'70px'
});
}