codeaiduk supports this item


16 comments found.

Rounded corners doesn’t work in FireFox 4 RC, maybe others.

Thank You for the info, I’ll check it.

It’s now fixed and update is in a queue.

works great thanx :)

This code is awesome. Thanks for the help. Worked great for me. is not working at all in Internet Explorer 7.


That’s the weirdest thing I’ve seen recently. I’m 100% sure I’ve checked that, especially on IE before uploading this item – and it worked then. Also codecanyon reviewe stuff probably checked that. I think MS has released some patch for IE which made JavaScript interpreter much more restrictive, even more than every other interpreter.

However, thank You very much for Your note, I’m now working on an update and will let You know as soon as it ready.


Thank you for your fast responce. I’m looking for the update. Btw the progress bars are GREAT .


It’s now updated and is in a queue for a review. Please, contact me, so I could sent You the update – on codecanyon it’ll be available probably after 3-4 days from now.

thanks again for Your note.


Do you have an example or code to use this progress bar to build a landing page to show current progress for web site page under construction?



What exactly do You mean? As I understand a simple image of a progress bar would be enough to show a readiness progress of a website. However, if You still want to use this JS Progress Bar, then check the preview site, You can find a code for every example listed there.


Hello !!

How to stop the progress bar after one passage ! Not loop !



Your code should look somehow like this:

function loadProgressBar() { myProgressBar = new ProgressBar(“my_progress_bar_1”, { maxValue: 100, labelText: “Loaded in {value,0} %”, orientation: ProgressBar.Orientation.Horizontal}); }

timerId = window.setInterval(function () {
    if (myProgressBar.value >= myProgressBar.maxValue) {
    } else {
        myProgressBar.setValue(myProgressBar.value + 1);
}, 100);


Hello, How to load the bar up to 75% from 0 to 75 directly without looping with the empty space of the remaining 25%? Thank you.

Hello, I’m not quite sure what are You trying to do. I think You would need to send me Your code and describe it a bit more. thanks

Try this one:

function loadProgressBar(){ myProgressBar = new ProgressBar(“Bar 1”,{ borderRadius: 5, width: 300, height: 20, labelText: ” {value,0} %”, orientation: ProgressBar.Orientation.Horizontal, direction: ProgressBar.Direction.LeftToRight, imageUrl: ‘', backgroundUrl: ‘' }); }

timerId = window.setInterval(function() {
    if (myProgressBar.value >= myProgressBar.maxValue * 0.75)

is it what You need?

why does my progress bar show twice?

Hi, looks like Your code is duplicated somehow/somewhere.

Hi, i have purchased your progressbar. GREAT WORK ! I am beginner an so i will also have some questions. 1. i need the bar to load a lot of images. where i can put the phats to load the images an the bar will show me the progress till 100%. 2. where to put the “what to do after load”? got to an url or close an div and open antoher… Thanks for your help. Gianfranco


AD 1 . You will need to create an array of images or at least image urls. Then, You will need to create every image dynamically and bind an onload event for those images. This is how it would look like:

var loadCount = 0; var urls = [‘a.jpg’,’b.png’,’’,’d.gif’];

var myProgressBar = new ProgressBar();// put here Your ProgressBar construcion code; myProgressBar.maxValue = urls.length;

var i = 0; for (i = 0; i < urls.length; i++){ var image = new Image(); image.src = urls[i]; image.onload = function(){ loadCount++; myProgressBar.setValue(loadCount); } }

AD 2 . There is a callback onValueChanged which is called every time progress bar’s value is changed. This could be used to acheive Your goal.

var myProgressBar = new ProgressBar();// put here Your ProgressBar construcion code; myProgressBar.onValueChanged = function(){ if (myProgressBar.value == myProgressBar.maxValue){ // put Your “what to do after load” code here } }

Hi (sorry for english) i would know if i can use progress bar like a preloader total website. How can i set it? May be use with other plugins?


Hi, Unfortunately it’s not possible exactly as You want it. It can be used however, as a image gallery load progress indicator. That’s not a problem.

I my opinion, the only way to do what You want is to estimate total time of page loading by testing the connection speed on some bulk image (with it’s size for example 1k), then when You know the connection speed and the output content length (size) You are able to show the load progress which shall reach 100% when the page is totally loaded. This looks fine for a page with no other images and scripts, as long as You do not include them in the content length calculation (and of course when the connection speed is static).

Being quite a new programmer as I am, it took me 2 hours realize that you must place the js function AFTER the div definitions. Otherwise it will not work. Just in case it helps someone.

Is it possible to change the caption title depending on an event or timer base function?

Such as “Loading ABC Module ….” @ 0% Such as “Loading ABC Module …. done” @24% (for instance) Such as “Loading DEF Module ….” @25% Such as “All modules loaded” @100%

Hi, Yes it’s possible. Use onValueChanged and labelText progressbar properties. Check the documentation at the preview page. If You’re having any problems with that, contact me via my profile page.

After the progress bar loads at 100%, how do I make it disappear from the page? BTW, Great Script!

Hi, Thanks. This is how You do it:

var myProgressBar = new ProgressBar(...);

myProgressBar.onValueChanged = function(){ = ‘none’; }

note, myProgressBar here is a variable storing ProgressBar object.

About Equalizer bar how it works? can follow music sound?

It’s not recognizing sound currently played, You would have to provide it with a signal.

Looks like it has been awhile since anyone posted a question so I am not sure if you are still supporting this…

My question is… can I use this as a progress bar for something like a fund raiser?

Say the goal is 100,000 so the top value would be set to that… Then as funds are raised and the amount is increased, when someone visits the site, the bar animates to the current value (say 50,000 for example) and stops there ?


Hi, sure, progress bar is also suitable for this purpose.

Hi codeaiduk,

can you explain in more detail that, please, where I use the modified code?

var myProgressBar = new ProgressBar(...);

myProgressBar.onValueChanged = function(){ = ‘none’; }

Thanks a lot!

Hi, This code looks uncomplete… it’s pointless, because it’s hidding the progressbar whenever it’s value has changed.

Please, send me full code via contact form on my profile page, I’ll try to respond quicker than this time.