OOUI/Widgets/Progress bars

From mediawiki.org
< OOUI‎ | Widgets

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[edit]

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

Example of a determinate progress bar .

JS[edit]

// 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[edit]

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[edit]

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

Example of an indeterminate progress bar .

JS[edit]

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

PHP[edit]

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[edit]

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