Ionic Progress Bar

The Ionic progress bar component is a horizontal progress bar that is used to visualize the progression of operation and activity. We can access the Ionic progress bar by using a standard <ion-progress-bar> component.

The Ionic progress bar is of two types, which are given below.

1. Determinate
2. Indeterminate

Determinate Progress bar

It is a type of progress bar, which can be used when the percentage of an operation is known. The determinate progress bar is a type of default progress bar, and the value property represents the progress.

Example

The following example explains the determinate progress bar where the value property represents the progress.

Output:

When the above Ionic app is executed, it will give the following output.

Indeterminate Progress Bar

It is a type of progress bar, which tells the operation is in progress. It means there is no need to indicate how long it will take. If you add the property reversed="true", you receive a query that is used to indicate pre-loading. The following example explains it more clearly.

Example

Output:

When you run the above code snippets, it will give the following output. Here, you will see that both the progress bar is animated in the opposite direction.

Buffer: It shows circles as animation for indicating some activity. If the value of the buffer property is less than one, you can show the additional buffering progress. We can understand the use of buffer attributes from the following example.

Example

Output:

Colorize Progress Bar

The <ion-progress-bar> component can be colorized by using the color attributes. It can be explained from the following example.

Example

Output:

Bind a variable with Progress Bar

We can also bind the progress bar with the value. To do this, we need to add the value in square brackets, which calls the variable bind to this value attribute. The following example explains it more clearly.

Example

The home.page.html file contains the value attribute that calls the variable bind to this attribute. The corresponding logic is written in the home.page.ts file.

Home.page.html

Home.page.ts

Output:

When you execute the above Ionic app, it will give the following output. Here, you will see that as the value exceeds, the progress bar will also exceed.