0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

loading icon: stop animation before beginning new animation, add callback functions to start and stop, rotate back to 0 deg when stopped

Browse source
This commit is contained in:
rlx 2013-07-29 09:46:52 +00:00
parent 7a20c4ca05
commit 77319eb44f
1 changed files with 16 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
source/Ox.UI/js/Core/LoadingIcon.js
View file

@ -29,11 +29,13 @@ Ox.LoadingIcon = function(options, self) {
? that.css({width: self.options.size, height: self.options.size})
: that.addClass('Ox' + Ox.toTitleCase(self.options.size));
that.stopAnimation = that.stop;
/*@
start <f> Start loading animation
() -> <f> Loading Icon Element
@*/
that.start = function() {
that.start = function(callback) {
var css, deg = 0, previousTime = +new Date();
if (!self.loadingInterval) {
self.loadingInterval = setInterval(function() {
@ -49,7 +51,9 @@ Ox.LoadingIcon = function(options, self) {
WebkitTransform: css
});
}, 83);
that.animate({opacity: 1}, 250);
that.stopAnimation().animate({opacity: 1}, 250, function() {
callback && callback();
});
}
return that;
};
@ -58,12 +62,20 @@ Ox.LoadingIcon = function(options, self) {
stop <f> Stop loading animation
() -> <f> Loading Icon Element
@*/
that.stop = function() {
that.stop = function(callback) {
var loadingInterval = self.loadingInterval;
if (self.loadingInterval) {
self.loadingInterval = void 0;
that.animate({opacity: 0}, 250, function() {
that.stopAnimation().animate({opacity: 0}, 250, function() {
var css = 'rotate(0deg)';
clearInterval(loadingInterval);
that.css({
MozTransform: css,
MsTransform: css,
OTransform: css,
WebkitTransform: css
});
callback && callback();
});
}
return that;