Search docs/

ion-progress-bar

ion-progress-bar is a horizontal progress bar to visualize the progression of an operation and activity. You can choose between two types: determinate and indeterminate.

Progress Type

Determinate

If the percentage of an operation is known, you should use the determinate type. This is the default type and the progress is represented by the value property.

A buffer shows circles as animation to indicate some activity. If the buffer property is smaller than 1 you can show the addditional buffering progress.

Indeterminate

If an operation is in progress and it's not necessary to indicate how long it will take.

If you add reversed="true", you receive a query which is used to indicate pre-loading.

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>
import React from 'react';
import { IonProgressBar, IonContent } from '@ionic/react';

export const ProgressbarExample: React.FC = () => (
  <IonContent>
    {/*-- Default Progressbar --*/}
    <IonProgressBar></IonProgressBar><br />

    {/*-- Default Progressbar with 50 percent --*/}
    <IonProgressBar value={0.5}></IonProgressBar><br />

    {/*-- Colorize Progressbar --*/}
    <IonProgressBar color="primary" value={0.5}></IonProgressBar><br />
    <IonProgressBar color="secondary" value={0.5}></IonProgressBar><br />

    {/*-- Other types --*/}
    <IonProgressBar value={0.25} buffer={0.5}></IonProgressBar><br />
    <IonProgressBar type="indeterminate"></IonProgressBar><br />
    <IonProgressBar type="indeterminate" reversed={true}></IonProgressBar><br />
  </IonContent>
);

Properties

buffer

Description

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

Attributebuffer
Typenumber
Default1

color

Description

The 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

mode

Description

The mode determines which platform styles to use.

Attributemode
Type"ios" | "md"

reversed

Description

If true, reverse the progress bar direction.

Attributereversed
Typeboolean
Defaultfalse

type

Description

The 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

Description

The 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 Custom Properties

NameDescription
--backgroundSame as --buffer-background when using a determinate progress bar, otherwise it styles the background of the ion-progress-bar itself.
--buffer-backgroundColor of the buffer bar
--progress-backgroundColor of the progress bar
View Source