Event driven Progress Bar - Javascript

Question

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 ...

This site isn't for suggesting libraries. Have you tried looking? Would you consider making your own? — gen_Eric
– gen_Eric, Commented Jul 24, 2013 at 19:03
Yes I've looked and I haven't found anything. I'm asking because I think there probably is some version of an event driven progress bar, but it probably has a different name and I should be searching something else — IdeoREX
– IdeoREX, Commented Jul 24, 2013 at 19:05
It wouldn't be hard to take a percentage one and modify it yourself. 10 tasks, each task is 10%... — Tim Withers
– Tim Withers, Commented Jul 24, 2013 at 19:06

MonkeyZeus · Accepted Answer · 2013-07-24 19:30:12Z

3

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!

answered Jul 24, 2013 at 19:30

MonkeyZeus

20.8k5 gold badges41 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

IdeoREX Over a year ago

Thanks, The example with the 4 pictures is ideal, because I can replace the pictures with the different tasks that are being done at each point in the process.

Collectives™ on Stack Overflow

Event driven Progress Bar - Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related