Ionic progress bar

The ionic progress bar element is a horizontal progress bar used to visualize the progression of operation and activity. You can use the <ion-progress-bar> component to create a progress bar in the ionic application.

There are two types of the ionic progress bar, which are as follows:

• Determinate
• Indeterminate

Determinate

When the percentage of operation is known, then you should use the determinate type. It is the default type of progress bar, and also value property represents the progress bar.

Example: This example explains how you can use the determinate progress bar in the ionic application.

Home.page.html

<ion-header>  
   <ion-toolbar color="primary">  
     <ion-title>Ionic Progress Bar</ion-title>  
   </ion-toolbar>  
 </ion-header>   
 <ion-content class="ion-padding" color="light">  
 <p>Default Progress Bar</p>  
 <ion-progress-bar></ion-progress-bar>   
 <p>Default Progress Bar at 60%</p>  
 <ion-progress-bar value="0.6"></ion-progress-bar>  
 </ion-content>   

Output: After executing this code you will get the output, which shown below:

Indeterminate

It is a type of progress bar, which shows operation in progress. This means there is no requirement to indicate how long it will take time. If you add the reversed=“true” property, then you receive a query that is used to specify the pre-loading.

Example: The following example is used to explain how you can use the indeterminate progress bar in the ionic application.

Home.page.html

<ion-header>  
   <ion-toolbar color="primary">  
     <ion-title>Ionic Progress Bar</ion-title>  
   </ion-toolbar>  
 </ion-header>  
 <ion-content class="ion-padding" color="light">   
 <p>Indeterminate Progress Bar</p>  
 <ion-progress-bar type="indeterminate"></ion-progress-bar>     
 <p>Indeterminate Reversed</p>
 <ion-progress-bar type="indeterminate" reversed="true"></ion-progress-bar>  
 </ion-content>   

Output: After executing this code you will get the output, which shown below:

Buffer

The buffer displays the circle as an animation to specify some activity in the ionic application. If the buffer property value is less than one, the additional buffering progress can be shown.

Example: This example is used to explain how you can use the buffer attribute in the progress bar.

Home.page.html

<ion-header>  
   <ion-toolbar color="primary">  
     <ion-title>Ionic Progress Bar</ion-title>  
   </ion-toolbar>  
 </ion-header>     
 <ion-content class="ion-padding" color="light">  
 <p>Buffer Progress Bar</p>  
 <ion-progress-bar value="0.35" buffer="0.5"></ion-progress-bar>     
 <p>Progress Bar</p> 
 <ion-progress-bar value="0.20"></ion-progress-bar>  
 </ion-content>   

Output: After executing this code you will get the output, which is shown below:

Colorization of the Progress bar

You can use the <ion-progress-bar> component to configure the color in the progress bar. Here, you can add the different colors in the ionic progress bar.

Example: This example is used to explain how you can use the color property in the ionic progress bar.

Home.page.html

<ion-header>  
 <ion-progress-bar value="0.20"></ion-progress-bar>  
 </ion-content>   
   <ion-toolbar color="primary">  
     <ion-title>Ionic Progress Bar</ion-title>  
   </ion-toolbar>  
 </ion-header>   
 <ion-content class="ion-padding" color="light">  
 <p>Colorize Progress Bar</p>  
 <ion-progress-bar value="0.35" color="danger"></ion-progress-bar><br>     
 <ion-progress-bar value="0.20" color="success"></ion-progress-bar><br>
 <ion-progress-bar value="0.50" color="primary"></ion-progress-bar><br>
 <ion-progress-bar value="0.40" color="warning"></ion-progress-bar><br>
 <ion-progress-bar value="0.60" color="tertiary"></ion-progress-bar>
 </ion-content>   

Output: After executing this code you will get the output, which is shown below:

Bind a variable with Progress Bar

You can also bind the progress bar with the value in the ionic application. For doing this, you required to add the value in square brackets, which calls the variable that binds to this value property.

Example: This example is used to explain how you can bind a variable with the progress bar.

Home.page.html

<ion-header>  
   <ion-toolbar color="primary">  
     <ion-title>Ionic Progress Bar</ion-title>  
   </ion-toolbar>  
 </ion-header> 
 <ion-content class="ion-padding" color="light">  
 <p>Bind a variable</p>  
 <ion-progress-bar [value]="progress" color="danger"></ion-progress-bar>     
 </ion-content>  

Home.page.ts   

In the home.page.ts file, you can set the time interval to load the progress bar.

import { Component } from
'@angular/core';  
 @Component({  
   selector: 'app-home',  
   templateUrl: 'home.page.html',  
   styleUrls: ['home.page.scss'],  
 })  
 export class HomePage {  
   progress = 0.20;   
   constructor() {  
     setInterval( () => {  
       this.progress += .1;  
       }, 1000 );  
   }  
 }   

Output: After executing this code you will get the output, which is shown below:

When the time interval is completed then it shows something like this.