Improve loading dots styles, added no animation fallback

This commit is contained in:
Igor Zhukov 2014-04-01 15:48:26 +04:00
parent 4f9442e657
commit 36394abadb
2 changed files with 23 additions and 3 deletions

View File

@ -2718,7 +2718,7 @@ ce671b orange
.loading_dots span
{
border: 0.15rem solid;
border: 0.125rem solid;
border-radius: 50%;
display: inline-block;
height: 0.2rem;

View File

@ -876,8 +876,28 @@ angular.module('myApp.directives', ['myApp.filters'])
};
function link ($scope, element, attrs) {
element.html('<div class="loading_dots"><span></span>' +
'<span></span><span></span></div>');
element.html(isAnimationSupported(element[0])
? '<div class="loading_dots"><span></span><span></span><span></span></div>'
: '...'
);
}
var animationSupported;
function isAnimationSupported (el) {
if (animationSupported === undefined) {
animationSupported = el.style.animationName !== undefined;
if (animationSupported === false) {
var domPrefixes = 'Webkit Moz O ms Khtml'.split(' '), i;
for (i = 0; i < domPrefixes.length; i++) {
if (el.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
animationSupported = true;
break;
}
}
}
}
return animationSupported;
}
})