• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Buried in cloud files? We can help with Spring cleaning!

    Whether you use Dropbox, Drive, G-Suite, OneDrive, Gmail, Slack, Notion, or all of the above, Dokkio will organize your files for you. Try Dokkio (from the makers of PBworks) for free today.

  • Dokkio (from the makers of PBworks) was #2 on Product Hunt! Check out what people are saying by clicking here.



Page history last edited by Scott González 9 years, 5 months ago


type: widget

release: 1.6

status: released

documentation: http://api.jqueryui.com/progressbar/

demo: http://jqueryui.com/progressbar/




1 - Description:


Progress indicators are meant to give a user feedback about the status of an operation that may not be instantaneous (completed in less than 500ms). Progress indicators can be placed in a wide range of UI contexts -- dialog box, page, menu or even within a form element. There are two basic types of progress indicators: determinate and indeterminate.


Determinate indicators provide specific feedback on where in the process the system is at any given time. These are usually shown as a horizontal bar that fills from left to right as the process heads towards completion and should fill completely when the process is complete. Variations of this indicator can range from a simple bar with or without labels (O1) to a bar with embedded text with the value complete (O2) or a segmented bar (O3) if the feedback is not continuous. A small circle that fills with a color can also be used as a determinate indicator (O7). A determinate progressbar should never cycle from empty to full to empty again on a timer - if the status of a process cannot be accurately tracked, an indeterminate progress indicator should be used.


Indeterminate indicators are used to provide feedback that a process is underway but that the current status cannot be tracked accurately enough to provide specific feedback on the current level of completeness. This can be displayed either as an animated bar with diagonal movement (O4) or a AJAX-style circular spinner (O5-6, O8).


In situations where multiple processes need to be completed sequentially, multiple progressbars can be used together. In the situation where a user is uploading multiple files, you could provide one progressbar for the total % complete and a second progressbar for the file currently being uploaded. In applications where multiple processes could happen in parallel, it's also possible to have a progressbar for each file.


The small, circular indicators are particularly useful for cases where you want to display the status of multiple steps in a sequence (like a wizard) in a list format where there may be a long name and there isn't room (or the need) for a full progressbar for each step. One advantage of this indicator is that it's also possible to mix and match indeterminate and determinate circular indicators if some steps have status feedback (like installing or downloading files) and other don't (saving data back to a web server) because these have both have the same size footprint. 


For a detailed explanation of progress indicators and best practices, please review Apple's human interface guidelines for progress indicators or Microsoft Vista UI guidelines for progressbars.


Progress bar in the wild that uses only CSS3:



Cross Browser HTML5 Progress Bars in depth:




2 - Visual design:






Design examples of 1.6 rc3 determinate progressbar options:




3 - Functional Specifications/Requirements:


This is a read-only widget for communicating status so there is no user interaction of any form with this widget. If the developer wants to allow a user to pause or cancel a process with an progress indicator, a separate button or link should be added for this purpose. The progressbar should be pretty "dumb" and just display the current % complete it's passed. The developer can write the logic to say once callback A is complete, then set progress to X% and that's it.



4 - Markup & Style:


(only used prior to implementation)




5 - Latest version of plugin:






6 - Open issues being discussed




Comments (7)

Jonathon Saine said

at 3:48 pm on Oct 26, 2012

I came across a person working on a twitter bootstrap progress bar enhancement.. I worked with him to improve on a few things and added some features: https://github.com/minddust/bootstrap-progressbar

demo: http://minddust.github.com/bootstrap-progressbar/
A lot of times you need to place text actually on the progress bar due to space constraints. Centering the text makes a lot of sense but then you run into an issue of covering your text with the progress bar or conflicting color to use for the text. If you look at the demo you will notice that there are actually two text labels, one for light text and one for dark. so if the progress bar fills over the text the correct color is shown.

This dual label concept came from this jui jsbin I stumbled upon awhile ago: http://jsbin.com/ohiyo/21/edit

The progress bar in jui is great but really I think it could be extended to show data within the element (filled/center) or partner it with tooltip or shown above/below on each end points. Just hit me up in the dev irc room if you want to talk about this further.

Scott González said

at 3:56 pm on Oct 26, 2012

We used to place a label on the progressbar and use the dual labeling for readability, but we decided this wasn't something that should existing in the core of the plugin. Some people will want text inside the progressbar, some will want it below, some will want it on the side, some won't want any. There's also the issue of localizing the textual portion of the label. This just seems too far out of scope for the core of the plugin.

Jonathon Saine said

at 7:25 pm on Oct 26, 2012

so can we do a proper demo/example of showing how to do text on the progress bar like the examples above? i think many people would benefit from this. as a lot of people pass on using jui because of something thats not in core.. not because it cant do it.. you can make jui do almost anything if you wanna spend the time. alot of people just dont have the time or the knowledge.

Scott González said

at 1:34 pm on Oct 29, 2012

I suppose, but as a demo it won't be built in a generic way. It's much more helpful for the community to just build extensions and then provide a good way to discover those extensions (which is what the new plugins site is supposed to do). In the meantime, I'm fine with adding an example of this.

Jörn Zaefferer said

at 5:27 am on Dec 13, 2012

I've just checked progressbar with both NVDA and JAWS in IE9 and Firefox. The regular progressbar at least indicate something, where JAWS reads the percent value, but just the number, while NVDA makes a beep, where the pitch is based on the progress. Deep means low value, high pitch high value. Not awful, but hardly useful. On the other hand, the indeterminate progressbar doesn't exist to a screenreader. There's just nothing happening.

One thing that we have to fix are our demos. A progressbar without a label is bougs for anyone, not just a screenreader user. There's needs to be an indication on what there's progress.

As for the indeterminate progressbar: Need to research if there's any official way to tell screenreaders about this state. Otherwise we have to resort to aria-labelledby, aria-live and similar, to provide the necessary information in text form.

Jörn Zaefferer said

at 5:32 am on Dec 13, 2012

After looking at the IRC backlog: Setting aria-valuetext seems like the right thing to do to make the indeterminate state more useful. For that and other changes to get announced, without making the progressbar focusable, adding aria-live="polite" should be tested.

Jörn Zaefferer said

at 6:12 am on Dec 20, 2012

Some ideas for better demos:

maybe we can do a progressbar demo, where a notification dialog tells the user that something is loading, with a button triggering that dialog, so that is happens after some user interaction

put a progressbar on a page and have it "loading assets" or something, simulating a html game. Again with proper labelling and something happening afterwards

You don't have permission to comment on this page.