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.
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/cliCreate 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=angularThe --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 --labThe--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