ui/ProgressBar

A basic progress bar component that can display the progress of something in a horizontal or vertical bar format.

A secondary independent progress indicator can be displayed, to indicate an additional degree of information, often used as a background loading progress.

import ProgressBar from '@enact/ui/ProgressBar';

Members

ProgressBarComponent

An unstyled progress bar component that can be customized by a theme or application.

import ProgressBar from '@enact/ui/ProgressBar';
Properties
backgroundProgress
Number

The proportion of the loaded portion of the progress bar.

  • Valid values are between 0 and 1.

Default: 0
children
Node

The contents to be displayed with progress bar.

css
Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal Elements and states of this component.

The following classes are supported:

  • progressBar - The root component class

  • fill - The foreground node of the progress bar

  • load - The background node of the progress bar

  • horizontal - Applied when orientation is 'horizontal'

  • vertical - Applied when orientation is 'vertical'

orientation
String

Sets the orientation of the slider.

Allowed values include:

  • 'horizontal' - A left and right orientation

  • 'vertical' - An up and down orientation

Default: 'horizontal'
progress
Number

The proportion of the filled portion of the progress bar.

  • Valid values are between 0 and 1.

Default: 0
progressAnchor
Number

Sets the point, as a proportion between 0 and 1, from which the progress bar is filled.

Applies to both the progress bar's value and backgroundProgress. In both cases, setting the value of progressAnchor will cause the progress bar to fill from that point down, when value or backgroundProgress is proportionally less than the anchor, or up, when value or backgroundProgress is proportionally greater than the anchor, rather than always from the start of the progress bar.

Default: 0
ArrayBooleanFunctionModuleNumberObjectString