OOUI/Widgets/Progress bars

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.