Browse Source

Improve loading dots styles, added no animation fallback

master
Igor Zhukov 10 years ago
parent
commit
36394abadb
  1. 2
      app/css/app.css
  2. 24
      app/js/directives.js

2
app/css/app.css

@ -2718,7 +2718,7 @@ ce671b orange @@ -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;

24
app/js/directives.js

@ -876,8 +876,28 @@ angular.module('myApp.directives', ['myApp.filters']) @@ -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;
}
})

Loading…
Cancel
Save