Comments on: Animated Progress Bars Using MooTools: dwProgressBar

By: Davor Popovic

Davor Popovic — Fri, 10 Jun 2011 18:04:05 +0000

and what I need to write in body to get this work??
I cope paste The MooTools JavaScript: dwProgressBar and copy paste css and MooTools Usage, put all this before head tag, also put the images, link to jquery and its not work for me?? Also can this go to another page when the countdown ends?

By: Oscar

Oscar — Tue, 05 Apr 2011 14:39:13 +0000

Great job, it works perfectly.

Thank you! :-)

By: Francois

Francois — Wed, 29 Dec 2010 09:43:33 +0000

I was looking for a progressbar script and I landed on your website. Nice website! Think I am adding it to my bookmarks. But before I do this… ;-)

Can you please explain how you render these GoogleWebfonts anti aliasing? I have not found a solution to this.

Thanx in advance!

By: Blog astuces web

Blog astuces web — Wed, 13 Jan 2010 22:50:38 +0000

I think i’m going to use into my blog too
Thanks for sharing

By: Creation sites web

Creation sites web — Wed, 13 Jan 2010 22:49:03 +0000

Very good job :)
i like it :)

By: Greg

Greg — Mon, 26 Oct 2009 19:31:20 +0000

I apologize if this was answered before.
Can anyone help me implement the preloader for a webpage. Thanks in advance.

By: Ty

Ty — Thu, 17 Sep 2009 06:50:13 +0000

How do I get this script to preload images?

By: Peter Januarius

Peter Januarius — Tue, 04 Aug 2009 01:43:20 +0000

I added a text header that I called ‘pretext’ which appears above the progress bar:

So the options object looks like this:

options: {
container: $$(‘body’)[0],
boxID:”,
percentageID:”,
displayID:”,
textID:”,
startPercentage: 0,
displayText: false,
speed:10,
pretext:”"
}

CreateElements looks like this:

//creates the box and percentage elements
createElements: function() {
var tbox = new Element(‘div’, { id: this.options.textID, ‘style’:'display:inline;float:left’ });
tbox.innerHTML = this.options.pretext;
var box = new Element(‘div’, { id:this.options.boxID });
var perc = new Element(‘div’, { id:this.options.percentageID, ‘style’:'width:0px’ });
perc.inject(box);
tbox.inject(this.options.container);
box.inject(this.options.container);
if(this.options.displayText) {
var text = new Element(‘span’, { id:this.options.displayID });
text.inject(this.options.container);
}
this.set(this.options.startPercentage);
},

Note that I added the ‘tbox’ Element

I like your component but I don’t like MooTools. It is so unintuitive. The ‘inject’ method is from some upside down world – possibly the Mr Men.

Cheers

Pete…

By: Peter Januarius

Peter Januarius — Sun, 02 Aug 2009 23:45:42 +0000

Excellent job. Easy to use. I was wracking my brains what to do on my initial load of my webapp. Your progress bar fitted in without any problems. Using Mootools 1.2.1 and jQuery.

Cheers

Pete…

By: Csaba

Csaba — Thu, 09 Jul 2009 22:07:28 +0000

Great sample code and as David said you can use it wherever you want . Cool