YouTip

# jQuery UI API - Progressbar Widget ## Category (#) ## Usage **Description:** Displays a determinate or indeterminate progress state. **Added in version:** 1.6 The progressbar is designed to display the current completion percentage of a process. The progressbar is flexibly sized via CSS and will by default scale to fit the size of its parent container. A determinate progressbar can only be used when the system can accurately update the current state. A determinate progressbar does not fill from left to right and then cycle back to empty – use an indeterminate progressbar if the actual state cannot be calculated in order to provide user feedback. ### Theming The progressbar widget uses the (#) to define its look and feel. To style the progressbar, use the following CSS class names: * `ui-progressbar`: Outer container for the progressbar. This element will have an additional `ui-progressbar-indeterminate` class for indeterminate progressbars. * `ui-progressbar-value`: This element represents the filled portion of the progressbar. * `ui-progressbar-overlay`: Overlay used to display animation for indeterminate progressbars. ### Dependencies ### Additional Notes * This widget requires some functional CSS, otherwise it won't work. If you are creating a custom theme, use the widget-specific CSS file as a starting point. ## Example A simple jQuery UI indeterminate progressbar. $( "#progressbar" ).progressbar({ value: false}); (#) [](#)[jQuery UI API – Menu Widget](#) [jQuery UI API – Slider Widget](#)[](#)