CODEWITHSUNDEEP
phpjavascriptjqueryhtmljson
IdeoREX
IdeoREX

Reputation: 1485

Event driven Progress Bar - Javascript

I want to implement an event driven process bar in my website. Where can I find one? Which ones would you recommend?

An event driven progress bar is similar to a loading bar, but instead of a percentage it progresses when progresses are completed. So I have a workflow that does 8 tasks. When task 1 is finished the progress back progresses 1/8 and task 2 is begun.

Ideally it could also display the 8 tasks [name or maybe description] on the bar

Thanks

Clarification I'm looked for these bars and have only found percentage progress bars. I don't know if there currently are event driven progress bars

Current Version of Question Is there a progress bar that can display text on or near the bar? This text would need to change depending on the progress of the bar.

An example would be:

10% - The process is just beginning 20% - It's getting there ...

Upvotes: 1

Views: 1614

Answers (1)

MonkeyZeus
MonkeyZeus

Reputation: 20747

Did you find this site?

http://workshop.rs/2012/12/animated-progress-bar-in-4-lines-of-jquery/

They have this example:

http://workshop.rs/demo/progress-bar-in-4-lines/demo2.php

jQuery UI has this line of code you should check out:

if ( target.is( "#numButton" ) ) {
    progressbar.progressbar( "option", {
    value: Math.floor( Math.random() * 100 )
});

//you could easily change value: to be whatever number you need as each process finishes

From this page:

http://jqueryui.com/progressbar/#indeterminate

Good luck!

Upvotes: 3

Related Questions