OOUI/Widgets/Progress bars

OOUI
OOUI is in maintenance mode. New code should use Codex .
Introduction
About the library OOjs primer
Getting started
Creating interfaces programmatically PHP examples Using OOUI in MediaWiki
Working with widgets
Elements GroupElements FlaggedElements LookupElements DraggableElements Widgets Icons, Indicators, and Labels Buttons and Switches Selects and Options Inputs Popups Progress bars Layouts Fields and Fieldsets Forms Stacks and Panels Menus Booklets and Pages Index and TabPanels Windows Simple messages Dialogs Process Dialogs Message Dialogs Window managers Toolbars Themes Other concepts
See also
Fixing scripts and gadgets

ProgressBarWidget bars visually display the status of an operation, such as a download. They can be used to show information about both determinate and indeterminate processes:

• Determinate ProgressBarWidgets show the percent of an operation that is complete.
• Indeterminate ProgressBarWidgets use a visual display of motion to indicate that an operation is taking place. Because the extent of an indeterminate operation is unknown, the bar does not use percentages.

Determinate progress bar

Create a determinate ProgressBarWidget with an initial percent-complete by setting the progress option to an integer reflecting the desired percentage:

JS

// Example: A determinate progress bar. Set an initial percent with 
// the 'progress' configuration option.
var progressBar = new OO.ui.ProgressBarWidget( {
		progress: 33
} );
						
$( document.body ).append( progressBar.$element );

PHP

use OOUI\ProgressBarWidget;

// Example: A determinate progress bar. Set an initial percent with 
// the 'progress' configuration option.
$progressBar = new ProgressBarWidget( [
		'progress' => 33
] );

// Append to HTML DOM
$dom = new DOMDocument();
$body = $dom->createElement( 'body', $progressBar );
$dom->appendChild( $body );
echo $dom->saveHTML();

Indeterminate progress bar

Create an indeterminate progress bar by setting the progress option to false:

JS

// Example: An indeterminate progress bar. 'progress' is set to 'false'.
var progressBar = new OO.ui.ProgressBarWidget( {
		progress: false
	} );
						
$( document.body ).append( progressBar.$element );

PHP

use OOUI\ProgressBarWidget;

// Example: An indeterminate progress bar. 'progress' is set to 'false'.
$progressBar = new ProgressBarWidget( [
		'progress' => false
] );

// Append to HTML DOM
$dom = new DOMDocument();
$body = $dom->createElement( 'body', $progressBar );
$dom->appendChild( $body );
echo $dom->saveHTML();

Use ProgressBarWidget methods to set and get the value of the progress (setProgress() and getProgress()).

See more

For a complete list of supported methods and configuration options, please see the code-level documentation.