Tony de Jesus
Because knowledge is power…
<< Back to:
Progress Bar Using Mootools Article
Demo Page: Progress Bar Using Mootools
Simple progress bar (ascending)
Play
Pause
Stop
Reset
Restart
Step to 25%
CSS
HTML
JavaScript
.progressbar{ height: 15px; padding-top: 3px; width: 200px; } .progressbar .pbbackground{ background-color: gray; height: 10px; } .progressbar .pbbackground .pb{ background-color: #ff7f00; height: 10px; }
<div id="progressbar1" class="progressbar"></div> <div class="commands"> <a href="javascript:progressBar1.play()">Play</a> <a href="javascript:progressBar1.pause()">Pause</a> <a href="javascript:progressBar1.stop()">Stop</a> <a href="javascript:progressBar1.reset()">Reset</a> <a href="javascript:progressBar1.restart()">Restart</a> <a href="javascript:progressBar1.stepTo(50)">Step to 25%</a> </div>
var progressBar1 = new TJProgressBar('progressbar1',{ animation: false, createOnLoad: true, direction: 'asc', isPersistent: false, totalTime: 10, step: false, timeBetweenCalls: false, length: 200 });
Simple progress bar (descending)
Play
Pause
Stop
Reset
Restart
CSS
HTML
JavaScript
.progressbar{ height: 15px; padding-top: 3px; width: 200px; } .progressbar .pbbackground{ background-color: gray; height: 10px; } .progressbar .pbbackground .pb{ background-color: #ff7f00; height: 10px; }
<div id="progressbar2" class="progressbar"></div> <div class="commands"> <a href="javascript:progressBar2.play()">Play</a> <a href="javascript:progressBar2.pause()">Pause</a> <a href="javascript:progressBar2.stop()">Stop</a> <a href="javascript:progressBar2.reset()">Reset</a> <a href="javascript:progressBar2.restart()">Restart</a> </div>
var progressBar2 = new TJProgressBar('progressbar2',{ animation: false, createOnLoad: true, direction: 'desc', isPersistent: false, totalTime: 10, step: false, timeBetweenCalls: false, length: 200 });
Animated progress bar (ascending)
Play
Pause
Stop
Reset
Restart
CSS
HTML
JavaScript
.progressbar{ height: 15px; padding-top: 3px; width: 200px; } .progressbar .pbbackground{ background-color: gray; height: 10px; } .progressbar .pbbackground .pb{ background-color: #ff7f00; height: 10px; } .animated .pbbackground .pb{ background: transparent url('http://www.tonyjesus.com/tj-demos/tjprogressbar/css/progressbar.gif') no-repeat scroll center center; }
<div id="progressbar3" class="progressbar animated"></div> <div class="commands"> <a href="javascript:progressBar3.play()">Play</a> <a href="javascript:progressBar3.pause()">Pause</a> <a href="javascript:progressBar3.stop()">Stop</a> <a href="javascript:progressBar3.reset()">Reset</a> <a href="javascript:progressBar3.restart()">Restart</a> </div>
var progressBar3 = new TJProgressBar('progressbar3',{ animation: { speed: 200, }, createOnLoad: true, direction: 'asc', isPersistent: false, totalTime: 10, step: false, timeBetweenCalls: false, length: 200 });
Persistent progress bar (descending)
Play
Pause
Stop
Reset
Restart
CSS
HTML
JavaScript
.progressbar{ height: 15px; padding-top: 3px; width: 200px; } .progressbar .pbbackground{ background-color: gray; height: 10px; } .progressbar .pbbackground .pb{ background-color: #ff7f00; height: 10px; }
<div id="progressbar4" class="progressbar"></div> <div class="commands"> <a href="javascript:progressBar4.play()">Play</a> <a href="javascript:progressBar4.pause()">Pause</a> <a href="javascript:progressBar4.stop()">Stop</a> <a href="javascript:progressBar4.reset()">Reset</a> <a href="javascript:progressBar4.restart()">Restart</a> </div>
var progressBar4 = new TJProgressBar('progressbar4',{ animation: false, createOnLoad: true, direction: 'desc', isPersistent: true, cookieName: 'tjprogressbar', totalTime: 10, step: false, timeBetweenCalls: false, length: 200 });
Simple progress bar with events (ascending)
Play
Pause
Stop
Reset
Restart
CSS
HTML
JavaScript
.progressbar{ height: 15px; padding-top: 3px; width: 200px; } .progressbar .pbbackground{ background-color: gray; height: 10px; } .progressbar .pbbackground .pb{ background-color: #ff7f00; height: 10px; } .percentage{ font-size: 12px; float: left; padding: 0 0 0 10px; } .left{ float: left; width: 300px; } .clr{ clear: both; }
<div id="progressbar5" class="progressbar left"></div> <div id="perc5" class="percentage"></div> <div class="clr"></div> <div class="commands"> <a href="javascript:progressBar5.play()">Play</a> <a href="javascript:progressBar5.pause()">Pause</a> <a href="javascript:progressBar5.stop()">Stop</a> <a href="javascript:progressBar5.reset()">Reset</a> <a href="javascript:progressBar5.restart()">Restart</a> </div>
var progressBar5 = new TJProgressBar('progressbar5',{ animation: false, createOnLoad: true, direction: 'asc', isPersistent: false, totalTime: 10, step: false, timeBetweenCalls: false, length: 200, onStep: function(value){ $('perc5').set('text',value.percentage+'%'); } });
My name is
Tony de Jesus
Find me on Facebook…
Hosting by Media Temple
© 2011
Tony de Jesus
·
Log in