loading icon: stop animation before beginning new animation, add callback functions to start and stop, rotate back to 0 deg when stopped
This commit is contained in:
parent
7a20c4ca05
commit
77319eb44f
1 changed files with 16 additions and 4 deletions
|
@ -29,11 +29,13 @@ Ox.LoadingIcon = function(options, self) {
|
||||||
? that.css({width: self.options.size, height: self.options.size})
|
? that.css({width: self.options.size, height: self.options.size})
|
||||||
: that.addClass('Ox' + Ox.toTitleCase(self.options.size));
|
: that.addClass('Ox' + Ox.toTitleCase(self.options.size));
|
||||||
|
|
||||||
|
that.stopAnimation = that.stop;
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
start <f> Start loading animation
|
start <f> Start loading animation
|
||||||
() -> <f> Loading Icon Element
|
() -> <f> Loading Icon Element
|
||||||
@*/
|
@*/
|
||||||
that.start = function() {
|
that.start = function(callback) {
|
||||||
var css, deg = 0, previousTime = +new Date();
|
var css, deg = 0, previousTime = +new Date();
|
||||||
if (!self.loadingInterval) {
|
if (!self.loadingInterval) {
|
||||||
self.loadingInterval = setInterval(function() {
|
self.loadingInterval = setInterval(function() {
|
||||||
|
@ -49,7 +51,9 @@ Ox.LoadingIcon = function(options, self) {
|
||||||
WebkitTransform: css
|
WebkitTransform: css
|
||||||
});
|
});
|
||||||
}, 83);
|
}, 83);
|
||||||
that.animate({opacity: 1}, 250);
|
that.stopAnimation().animate({opacity: 1}, 250, function() {
|
||||||
|
callback && callback();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
return that;
|
return that;
|
||||||
};
|
};
|
||||||
|
@ -58,12 +62,20 @@ Ox.LoadingIcon = function(options, self) {
|
||||||
stop <f> Stop loading animation
|
stop <f> Stop loading animation
|
||||||
() -> <f> Loading Icon Element
|
() -> <f> Loading Icon Element
|
||||||
@*/
|
@*/
|
||||||
that.stop = function() {
|
that.stop = function(callback) {
|
||||||
var loadingInterval = self.loadingInterval;
|
var loadingInterval = self.loadingInterval;
|
||||||
if (self.loadingInterval) {
|
if (self.loadingInterval) {
|
||||||
self.loadingInterval = void 0;
|
self.loadingInterval = void 0;
|
||||||
that.animate({opacity: 0}, 250, function() {
|
that.stopAnimation().animate({opacity: 0}, 250, function() {
|
||||||
|
var css = 'rotate(0deg)';
|
||||||
clearInterval(loadingInterval);
|
clearInterval(loadingInterval);
|
||||||
|
that.css({
|
||||||
|
MozTransform: css,
|
||||||
|
MsTransform: css,
|
||||||
|
OTransform: css,
|
||||||
|
WebkitTransform: css
|
||||||
|
});
|
||||||
|
callback && callback();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
return that;
|
return that;
|
||||||
|
|
Loading…
Reference in a new issue