Ionic 6 Progress Bar Integration with Ion Progress Bar Tutorial

Throughout this comprehensive tutorial, you will discover how to integrate or create a horizontal progress bar in the Ionic Angular application using the ion-progress-bar UI component.

Similarly, we will also look into how to add buffer, determinate and indeterminate progress—bar types in Ionic app.

Progress bars are an immensely useful UI graphical control element; Progress bars help display a particular task’s ongoing progress. For instance, downloading a file, uploading a file, transferring a file, installing a software app.

A progress bar can be illustrated vertically and horizontally; however, the primary purpose of the progress bar is to display the progress of a specific task.

Using the ionic progress bar component, you may create a dynamic progress bar in Ionic; however, in this guide, we will explain how to build a simple progress bar in ionic.

Progress Bar Types

Preferably, there are three types of progress bars:

Determinate
The determinate progress bar illustrates the progress of an ongoing task in numerical values mainly between 0 to 100% that keep the user’s interest intact about the task information.

Indeterminate
Theoretically, this type of progress bar is mainly used when we are not aware that when will the task is going to finish. Apparently, we use an animate progress bar to illustrate such a type of progress.

Buffer
A determinate buffer progress bar shows the progress vertically with total data, data downloaded, and data process finished.

Ionic 6 Angular Progress Bar Example

  • Step 1: Install Ionic App
  • Step 2: Integrate Progress Bar Component
  • Step 3: Determinate Progress Bar
  • Step 4: Indeterminate Progress Bar
  • Step 5: Determinate Buffer Progress Bar
  • Step 7: Test Application

Install Ionic App

The ionic development environment is created by installing the Ionic CLI tool, execute the command to install the tool:

npm install -g ionic@latest

Let us install a new blank Ionic angular project:

ionic start ionic-datatable-example blank --type=angular

Get inside the app’s root:

cd ionic-datatable-example

Remove Type Errors

You have to remove strict type errors make sure to set “strictTemplates”: false in angularCompilerOptions in tsconfig.json file.

Integrate Progress Bar Component

You can evoke a progress-bar in ionic using the ion-progress-bar directive, and it will create a horizontal progress bar. Consequently, open and add the given below-suggested code in the home.page.html file to add the progress bar in ionic.

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

<!-- Default Progressbar with 55 percent -->
<ion-progress-bar value="0.55"></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>

The value property shows the progress, and you can pass the dynamic value here; the color property adds and updates the aesthetics of the progress bar, whereas type property helps you set the type of the progress bar.

Determinate Progress Bar

In this step, you will learn to add a determinate progress bar, and it will show the progress in percentage value in our ionic application,

So, get into the home.page.html template and add the following code.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

  <ion-progress-bar [value]="value" *ngIf="barLoader"></ion-progress-bar>

  <ion-button color="primary" size="small" (click)="initeProgressBar()">Download File</ion-button>

  <p>Download Progress <span *ngIf="value">{{value*100 | number}}%</span></p>

</ion-content>

Similarly, update the home.page.ts template:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {

  barLoader: boolean;
  value: number;

  constructor() { }

  showProgressBar() {
    this.barLoader = true;
  }

  hideProgressBar() {
    this.barLoader = false;
  }

  initeProgressBar() {
    this.showProgressBar()
    for (let index = 0; index <= 100; index++) {
      this.addPbar(+index);
    }
  }

  addPbar(i) {
    setTimeout(() => {
      let apc = (i / 100)
      this.value = apc;
    }, 30 * i);
  }


}

Indeterminate Progress Bar

In this step, you will learn how to create an indeterminate progress bar, and it is a straightforward process; just add the type property and pass the indeterminate value.

Open and update the home.page.html file:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

  <ion-progress-bar *ngIf="showLoader" [type]="'indeterminate'"></ion-progress-bar>

  <ion-button color="secondary" size="small" (click)="fetchUsers()">Get Users</ion-button>

</ion-content>

Open and update the home.page.ts file:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {
  
  showLoader: boolean;
  constructor() {
  }

  displayProgress() {
    this.showLoader = true;
  }

  killProgressBar() {
    this.showLoader = false;
  }

  fetchUsers() {
    this.displayProgress();
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => {
        console.log('success');
      }).catch(error => {
        console.log('error');
      }).finally(() => {
        this.killProgressBar();
      })
  }


}

Determinate Buffer Progress Bar

In this step, you will implement a determinate buffer progress bar in the Ionic app; you need to add the [buffer] property in the ionic progress bar component. So, let’s create a simple loader that will update real-time progress, such as data loaded, complete information about the data.

Open and update the home.page.html file:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

  <ion-progress-bar 
    [value]="value" 
    [buffer]="buffer" 
    *ngIf="showLoader">
  </ion-progress-bar>
  
  <ion-button color="primary" expand="full" size="small" (click)="showVideo()">Watch Video</ion-button>

</ion-content>

Open and update the home.page.ts file:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {
  
  loader: boolean;
  value: number;
  buffer: number;
  
  constructor() { }

  progressBar() {
    this.loader = true;
  }

  showVideo() {
    this.progressBar()
    for (let index = 0; index <= 100; index++) {
      this.initBar(index);
      this.setBufferBar(index)
    }
  }

  initBar(i) {
    setTimeout(() => {
      let barVal = (i / 100)
      
      console.log(barVal);

      this.value = barVal;
    }, 300 * i);
  }

  setBufferBar(i) {
    setTimeout(() => {
      let barVal = (i / 100)
      console.log(barVal);
      this.buffer = barVal;
    }, 150 * i);
  }


}

You can check the browser’s console about the buffer progress of our video streaming module.

Test Application

Testing an Ionic project is extremely easy, given below are instructions that can allow you to add platforms, create a build and start the app on the preferred device:

Execute command to add the platform:

# iOS
ionic cordova platform add ios

# Android
ionic cordova platform add android

# Windows
ionic cordova platform add windows

Next, again execute one of the commands to create the build.

# iOS
ionic cordova build ios

# Android
ionic cordova build android

# Windows
ionic cordova build windows

Lastly, run any given command to run the application on a real device or simulator; and yes, you can test or debug the app on the chrome browser:

# iOS
ionic cordova run ios -l

# Android
ionic cordova run android -l

# Windows
ionic cordova run windows -l

Ionic Progress Bar

Conclusion

The Ionic Angular Progress Bar tutorial is over; In this example, we looked at how to build a progress bar in the Ionic Angular application with the help of the ion progress bar component.

Furthermore, we explained the types of Ionic progress bars not only but also explained why and when they are used.