Ionic 5 Progress Bar using ion-progress-bar Component Tutorial with Example App

In this Ionic 5/4 tutorial, we’ll learn how to implement a vertical progress bar UI component in Ionic Angular applications.

Ionic Framework provides a wide variety of UI components so that we barely need to create our own. The progress bar UI web component is added in the Ionic application by using the ion-progress-bar directive. It can be implemented in a number of ways including <strong>determinate, indeterminate</strong> and buffer types. Yes as always we will discuss them all.

 

[lwptoc]

 

What is the Progress Bar?

A progress bar is a web component consisting of a verticle bar from start to an end which generally represents the progress of a task from 0 to 100%. These progress bars adds a lot to a user interface in communicating the actual status of possessing going on.

These processes can be of any type like File Uploading, Fetching data from a server, Downloading some big media files, etc.

 

Types of the Progress Bar?

Yup a single animated verticle progress bar can communicate in a number of ways. It is basically of three types determinate, indeterminate, and buffer. Let’s read in more detail.

 

Determinate

A determinate progress bar tells about the progress in well defines numbers from 0 to 100% percent. For example, when we upload a large file to a server then it can send back information about how many tasks or the data transfer is done. This type of progress bar is more reliable and provides more info about task completion.

 

Indeterminate

The process where we are not sure when they are going to complete, we show an animates progress bar. Tasks like fetching of some computed data from the server may take interminate time, in that case, we use Indeterminate type of progress bars.

 

Determinate Buffer

The determinate buffer progress bar displays the verticle progress with three types of indicators. Total data, data downloaded and data process completed. This type of progress bar we all see in the Youtube video players. It tells about video seen, downloaded content, and left to be downloaded.

 

So now we know the type of Progress bars we can create in Ionic Applications, let’s get started with implementation…

Install or Update Ionic CLI

To create Ionic applications, you need to install @ionic/cli package. If already have updated it to latest version

$ npm install -g @ionic/cli

 

Create new Ionic Angular Application

We’ll create a new Ionic 5 application using Angular framework with a starter blank template.

$ ionic start ionic-progress-bar-app blank --type=angular

The --type option property is used to select the framework we want to use for our Ionic application

 

Move to the application directory

$ cd ionic-progress-bar-app<br />

 

Now you can run the Ionic application by hitting

$ ionic serve --lab

The--lab option is used to open the application in the browser into a lab viewer where you can concurrently see how it will look on multiple platforms including Android, iOS, and Windows.

 

Adding Progress Bar Component

The progress bar component in the Ionic Framework is implemented by adding the ion-progress-bar component directive in the template HTML.

In the home.page.html file add the ion-progress-bar component to create a default progress bar as shown below

<ion-progress-bar></ion-progress-bar><br />

The default progress is near serves no purpose it only creates a wrapper to something.

Let’s have a look at how to use it in an actual application

Indeterminate Progress Bar in Ionic App 

An Indeterminate progress bar is created when we set [type]="'indeterminate'" on ion-progress-bar

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

We can control its viewability by adding the *ngIf Angular directive to control when to show it. 

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

  <ion-button color="primary" size="small" (click)="getPosts()">Fetch Server API</ion-button>

 

In the class, component define the boolean flag and methods used 

export class HomePage {

  showLoader: boolean;
  constructor() {
  }

  showProgressBar() {
    this.showLoader = true;
  }

  hideProgressBar() {
    this.showLoader = false;
  }

  getPosts() {

    // Show Progress
    this.showProgressBar();

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

        // Hide Progress
        this.hideProgressBar();

      })
  }

}

 

We are making an HTTP call using the Javascript fetch() method. Before making the call the showProgressBar() method displays the progress bar after the call completes we are calling  hideProgressBar() in the finally block to hide the progress bar.

 

Determinate Progress Bar with the percentage in Ionic Application

Now we will discuss how to implement Progress Bar with the percentage indication for process status. To define the percentage we add [value] property having the value between 0 to 1. Where 0 means 0% 0.5 means 50% and 1 equals 100%.

In the template, HTML add the ion-progress-bar component with a button.

<h4>Upload Progress <span *ngIf="p_bar_value">{{p_bar_value*100 | number}}%</span></h4>
  <ion-progress-bar [value]="p_bar_value" *ngIf="showLoader"></ion-progress-bar>
  <ion-button color="warning" size="small" (click)="runDeterminateProgress()">Upload File</ion-button>

In the p_bar_value we are getting actual progress in decimal same on the ion-progress-bar component’s [value], so we multiplied it with 100 on h4 tag.

Next, update the class component

export class HomePage {

    showLoader: boolean;
    p_bar_value: number;
    constructor() {
    }
  
    showProgressBar() {
      this.showLoader = true;
    }
  
    hideProgressBar() {
      this.showLoader = false;
    }
  
    runDeterminateProgress() {
      this.showProgressBar()
      for (let index = 0; index <= 100; index++) {
        this.setPercentBar(+index);
      }
    }
  
    setPercentBar(i) {
      setTimeout(() => {
        let apc = (i / 100)
        console.log(apc);
        this.p_bar_value = apc;
      }, 30 * i);
    }
  
  }

Here we are calling a mock for loop to show progress in percentage. In a real situation, you can pass the progress while uploading or download files in a similar method to display the progress in percentage.

 

Buffer Progress Bar 

A buffer progress bar takes more responsible main mainly used while streaming realtime media files like YouTube videos. We can add the [buffer] property with [value], where both represent different information. The buffer property tells how much data is loaded on a device from server and value tells how much is process or in case of video home much video is already watched by a user.

<h4>Video Streaming</h4>

<ion-progress-bar 
    [value]="p_bar_value" 
    [buffer]="p_bar_buffer" 
    *ngIf="showLoader"
    >
</ion-progress-bar>

<ion-button color="warning" expand="full" size="small" (click)="streamMedia()">Watch Online</ion-button>

Update class component with mock methods to display streaming video progress effect

export class HomePage {

    showLoader: boolean;
    p_bar_value: number;
    p_bar_buffer: number;
    constructor() {
    }
  
    showProgressBar() {
      this.showLoader = true;
    }
  
    streamMedia() {
      this.showProgressBar()
      for (let index = 0; index <= 100; index++) {
        this.setPercentBar(index);
        this.setBufferBar(index)
      }
    }
  
    setPercentBar(i) {
      setTimeout(() => {
        let apc = (i / 100)
        console.log(apc);
        this.p_bar_value = apc;
      }, 300 * i);
    }
  
    setBufferBar(i) {
      setTimeout(() => {
        let apc = (i / 100)
        console.log(apc);
        this.p_bar_buffer = apc;
      }, 150 * i);
    }
  
  }

The above methods will control the value as well as the buffer bar on the progress bar component.

 

Properties of the Progress bar

Let’s have a look at the available properties again

 

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

color The color to use from your application’s color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark"

reversed If true, reverse the progress bar direction.

type 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).

value The value determines how much of the active bar should display when the type is "determinate". The value should be between [0, 1].

 

Custom Style the Progress bar

There are three properties available to customize the background colors of the progress bar. Let’s do it.

You can also check this post on how to change the custom CSS properties of Ionic  UI component.

To customize the progress bar style, first, add a custom CSS class then update the global.scss file with CSS code below

<ion-progress-bar 
    class="my-buffer-progress" 
    [value]="p_bar_value_b" 
    [buffer]="p_bar_buffer">
</ion-progress-bar>

Update global.scss file

.my-buffer-progress{
    --background:#82F038;
    --buffer-background:#F0A821;
    --progress-background:#F01D09;
}

Yeah! it looks weird 🙂 I know you can color it better.

 

Source Code

Get the source code of the above application in GitHub repo here.

 

Conclusion

Finally, we have implemented all types of Progress bar components available in the Ionic Framework. And got to know how to use them in certain specific situations. I hope you enjoyed and it was helpful do share with others.

 

Thanks for reading! have a great day