enact logoEnact
Edit on GitHub

ui/ProgressBar

A basic progress bar component that can display the progress of something in a horizontal, vertical, or radial 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';

ProgressBarBaseComponent

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

import {ProgressBarBase} 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.

componentRef
ObjectFunction

Called with a reference to the root component.

When using ui/ProgressBar.ProgressBar, the ref prop is forwarded to this component as componentRef.

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

  • bar - The background node (the empty part of the progressBar)

  • fill - The foreground of the progress bar (progress)

  • load - The backgroundProgress node

  • horizontal - Applied when orientation is 'horizontal'

  • vertical - Applied when orientation is 'vertical'

  • radial - Applied when orientation is 'radial'

orientation
String

Sets the orientation of the slider.

Allowed values include:

  • 'horizontal' - A left and right orientation

  • 'vertical' - An up and down orientation

  • 'radial' - A circular 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

ProgressBarDecoratorHigher-Order Component

A higher-order component that adds behavior to ProgressBar.

import {ProgressBarDecorator} from '@enact/ui/ProgressBar';
ArrayBooleanFunctionModuleNumberObjectString