only animate loading interval if its actually used
This commit is contained in:
parent
0f10b4be47
commit
fde3b905f9
1 changed files with 33 additions and 30 deletions
|
@ -90,8 +90,10 @@ Ox.load.UI = function(options, callback) {
|
||||||
margin: 'auto',
|
margin: 'auto',
|
||||||
MozUserSelect: 'none',
|
MozUserSelect: 'none',
|
||||||
WebkitUserSelect: 'none'
|
WebkitUserSelect: 'none'
|
||||||
},
|
},
|
||||||
loadingInterval;
|
loadingInterval,
|
||||||
|
$icon,
|
||||||
|
deg = 0;
|
||||||
|
|
||||||
browserSupported ? showIcon() : showWarning();
|
browserSupported ? showIcon() : showWarning();
|
||||||
|
|
||||||
|
@ -116,34 +118,22 @@ Ox.load.UI = function(options, callback) {
|
||||||
.appendTo(div);
|
.appendTo(div);
|
||||||
});
|
});
|
||||||
*/
|
*/
|
||||||
var deg = 0,
|
var src = Ox.PATH + 'UI/themes/' + options.theme + '/svg/symbolLoading.svg'
|
||||||
$element,
|
|
||||||
src = Ox.PATH + 'UI/themes/' + options.theme + '/svg/symbolLoading.svg'
|
|
||||||
Ox.getFile(src, function() {
|
Ox.getFile(src, function() {
|
||||||
var $icon = Ox.$('<img>')
|
$icon = Ox.$('<img>')
|
||||||
.attr({
|
.attr({
|
||||||
src: src
|
src: src
|
||||||
})
|
})
|
||||||
.css(Ox.extend({
|
.css(Ox.extend({
|
||||||
width: '32px',
|
width: '32px',
|
||||||
height: '32px'
|
height: '32px'
|
||||||
}, css))
|
}, css))
|
||||||
.on({
|
.on({
|
||||||
mousedown: function(e) {
|
mousedown: function(e) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.appendTo($screen),
|
.appendTo($screen);
|
||||||
deg = 0;
|
|
||||||
loadingInterval = setInterval(function() {
|
|
||||||
deg = (deg + 30) % 360;
|
|
||||||
$icon.css({
|
|
||||||
MozTransform: 'rotate(' + deg + 'deg)',
|
|
||||||
OTransform: 'rotate(' + deg + 'deg)',
|
|
||||||
WebkitTransform: 'rotate(' + deg + 'deg)',
|
|
||||||
transform: 'rotate(' + deg + 'deg)'
|
|
||||||
});
|
|
||||||
}, 83);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -201,7 +191,6 @@ Ox.load.UI = function(options, callback) {
|
||||||
.appendTo($box);
|
.appendTo($box);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
@ -211,6 +200,7 @@ Ox.load.UI = function(options, callback) {
|
||||||
}, 1000, function() {
|
}, 1000, function() {
|
||||||
if (browserSupported) {
|
if (browserSupported) {
|
||||||
clearInterval(loadingInterval);
|
clearInterval(loadingInterval);
|
||||||
|
loadingInterval = null;
|
||||||
$screen.remove();
|
$screen.remove();
|
||||||
} else {
|
} else {
|
||||||
$screen.on({
|
$screen.on({
|
||||||
|
@ -222,6 +212,19 @@ Ox.load.UI = function(options, callback) {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
show: function() {
|
show: function() {
|
||||||
|
if (!loadingInterval) {
|
||||||
|
loadingInterval = setInterval(function() {
|
||||||
|
if ($icon) {
|
||||||
|
deg = (deg + 30) % 360;
|
||||||
|
$icon.css({
|
||||||
|
MozTransform: 'rotate(' + deg + 'deg)',
|
||||||
|
OTransform: 'rotate(' + deg + 'deg)',
|
||||||
|
WebkitTransform: 'rotate(' + deg + 'deg)',
|
||||||
|
transform: 'rotate(' + deg + 'deg)'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, 83);
|
||||||
|
}
|
||||||
$screen.appendTo($body);
|
$screen.appendTo($body);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue