Skip to main content
Version: v5

ion-progress-bar

Progress bars inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. There are two types of progress bars: determinate and indeterminate.

Progress Type

Determinate

Determinate is the default type. It should be used when the percentage of an operation is known. The progress is represented by setting the value property. This can be used to show the progress increasing from 0 to 100% of the track.

If the buffer property is set, a buffer stream will show with animated circles to indicate activity. The value of the buffer property will also be represented by how much visible track there is. If the value of buffer is less than the value property, there will be no visible track. If buffer is equal to 1 then the buffer stream will be hidden.

Indeterminate

The indeterminate type should be used when it is unknown how long the process will take. The progress bar is not tied to the value, instead it continually slides along the track until the process is complete.

Usage

<!-- Default Progressbar -->
<ion-progress-bar></ion-progress-bar>

<!-- Default Progressbar with 50 percent -->
<ion-progress-bar value="0.5"></ion-progress-bar>

<!-- Colorize Progressbar -->
<ion-progress-bar color="primary" value="0.5"></ion-progress-bar>
<ion-progress-bar color="secondary" value="0.5"></ion-progress-bar>

<!-- Other types -->
<ion-progress-bar value="0.25" buffer="0.5"></ion-progress-bar>
<ion-progress-bar type="indeterminate"></ion-progress-bar>
<ion-progress-bar type="indeterminate" reversed="true"></ion-progress-bar>

Properties

buffer

DescriptionIf the buffer and value are smaller than 1, the buffer circles will show.
The buffer should be between [0, 1].
Attributebuffer
Typenumber
Default1

color

DescriptionThe color to use from your application's color palette.
Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".
For more information on colors, see theming.
Attributecolor
Typestring \| undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" \| "md"
Defaultundefined

reversed

DescriptionIf true, reverse the progress bar direction.
Attributereversed
Typeboolean
Defaultfalse

type

DescriptionThe state of the progress bar, based on if the time the process takes is known or not.
Default options are: "determinate" (no animation), "indeterminate" (animate from left to right).
Attributetype
Type"determinate" \| "indeterminate"
Default'determinate'

value

DescriptionThe value determines how much of the active bar should display when the
type is "determinate".
The value should be between [0, 1].
Attributevalue
Typenumber
Default0

CSS Shadow Parts

NameDescription
progressThe progress bar that shows the current value when type is "determinate" and slides back and forth when type is "indeterminate".
streamThe animated circles that appear while buffering. This only shows when buffer is set and type is "determinate".
trackThe track bar behind the progress bar. If the buffer property is set and type is "determinate" the track will be the
width of the buffer value.

CSS Custom Properties

NameDescription
--backgroundBackground of the progress track, or the buffer bar if buffer is set
--buffer-backgroundDEPRECATED, use --background instead
--progress-backgroundBackground of the progress bar representing the current value
View Source