Version: v6

ion-progress-bar

Progress Type
Usage
Properties
CSS Shadow Parts
CSS Custom Properties

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

実行中の操作を表します。操作にかかる時間を示す必要はありません。

reversed="true"を指定した場合、ロード前状態を表すための表示となります。

Usage

Angular
Javascript
React
Stencil
Vue

<!-- 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>

<!-- 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>
);

import { Component, h } from '@stencil/core';

@Component({
  tag: 'progress-bar-example',
  styleUrl: 'progress-bar-example.css'
})
export class ProgressBarExample {
  render() {
    return [
      // 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>
    ];
  }
}

<template>
  <!-- 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>
</template>

<script>
import { IonProgressBar } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonProgressBar }
});
</script>

Properties

buffer

Description	If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1].
Attribute	`buffer`
Type	`number`
Default	`1`

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.
Attribute	`color`
Type	`string ｜ undefined`
Default	`undefined`

mode

Description	The mode determines which platform styles to use.
Attribute	`mode`
Type	`"ios" ｜ "md"`
Default	`undefined`

reversed

Description	If true, reverse the progress bar direction.
Attribute	`reversed`
Type	`boolean`
Default	`false`

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).
Attribute	`type`
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].
Attribute	`value`
Type	`number`
Default	`0`

CSS Shadow Parts

Name	Description
`progress`	The progress bar that shows the current value when `type` is `"determinate"` and slides back and forth when `type` is `"indeterminate"`.
`stream`	The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `"determinate"`.
`track`	The 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

Name	Description
`--background`	Background of the progress track, or the buffer bar if `buffer` is set
`--buffer-background`	DEPRECATED, use `--background` instead
`--progress-background`	Background of the progress bar representing the current value

Contents

Progress Type​

Determinate​

Indeterminate​

Usage​

Properties​

buffer​

color​

mode​

reversed​

type​

value​

CSS Shadow Parts​

CSS Custom Properties​