Created
August 22, 2011 16:06
-
-
Save Olical/1162768 to your computer and use it in GitHub Desktop.
Progress bar class for MooTools
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Live example - http://jsfiddle.net/Wolfy87/KJtdB/ | |
| var bar = new Progress({ | |
| element: $('bar'), | |
| progress: 20 | |
| }); | |
| setTimeout(function() { | |
| bar.setProgress(45); | |
| setTimeout(function() { | |
| bar.setProgress(78); | |
| setTimeout(function() { | |
| bar.setProgress(100); | |
| }, 1400); | |
| }, 500); | |
| }, 800); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var Progress = new Class({ | |
| Implements: [Options, Events], | |
| options: { | |
| element: null, | |
| progress: 0, | |
| property: 'width', | |
| unit: '%', | |
| duration: 500 | |
| }, | |
| initialize: function(options) { | |
| this.setOptions(options); | |
| // Set up the tween | |
| this.tween = new Fx.Tween(options.element, { | |
| property: this.options.property, | |
| unit: this.options.unit, | |
| link: 'cancel', | |
| duration: this.options.duration | |
| }); | |
| // Set the initial progress | |
| this.setProgress(this.options.progress, true); | |
| }, | |
| setProgress: function(progress, instant) { | |
| // Set the progress either instantly or with an animation | |
| if(instant) { | |
| this.options.element.setStyle(this.options.property, progress + this.options.unit); | |
| } | |
| else { | |
| this.tween.start(this.options.progress, progress); | |
| } | |
| // Update the current progress | |
| this.options.progress = progress; | |
| this.fireEvent('progress', progress); | |
| }, | |
| getProgress: function() { | |
| return this.options.progress; | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var Progress=new Class({Implements:[Options,Events],options:{element:null,progress:0,property:"width",unit:"%",duration:500},initialize:function(a){this.setOptions(a);this.tween=new Fx.Tween(a.element,{property:this.options.property,unit:this.options.unit,link:"cancel",duration:this.options.duration});this.setProgress(this.options.progress,!0)},setProgress:function(a,b){b?this.options.element.setStyle(this.options.property,a+this.options.unit):this.tween.start(this.options.progress,a);this.options.progress= | |
| a;this.fireEvent("progress",a)},getProgress:function(){return this.options.progress}}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment