OOUI/Widgets/Progress bars

From MediaWiki.org
Jump to navigation Jump to search

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.

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 .

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

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

Example of an indeterminate progress bar .

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

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

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