How to implement progress bar in Ionic 3

Ionic is an open source framework and one of the most popular cross platform mobile app framework. It is helpful for developing or building hybrid mobile apps quickly and easily. It will save a lot of time and money for investment in other areas.

This article demonstrates how to implement progress bar in ionic 3. But before moving ahead we need to setup a few basic things like link installation setup for ionic project. 

Latest Ionic 3 CLI 
Latest Cordova 
Node Command Line Window (Windows) or Terminal (OS X, Linux) 
Text Editor or IDE (e.g. Visual Studio CodeAtom,) 

Once Node.js is installed we will be able to install other tools on terminal or command line. Run the following commands step by step for installing Node.js. 

npm install -g ionic cordova  

Installation is once finished let’s start creating a ionic 3 app. 

Create Ionic 3 app:

Open your node.js terminal and then open a specific location for creating ionic 3 app. 

Start a new Ionic project using ionic start command: 

ionic start myApp 

This command will take a few minutes because it has to install all dependencies and modules required for a project. 

Now change the location to myApp 

cd myApp 

After changing the location to myApp, add android platform to our app. 

ionic cordova platform add android 

ionic cordova platform add browser(For Browser) 

T run the project use following command. 

ionic serve (For Browser) 

ionic cordova run android(For Device)  

Ensure that you have a connected device and settings have been set. 

Now let’s start. 



A progress bar can be used to show users how far along the current process is. It is used to identify the process stages as a percentage. 


This input property is used to pass a value to parent component to child component via tags surrounded by square brackets. 

Step 1:

First, we need to the setup progress bar component part. So we use the following commands in terminal like nodejs or cmd for creating page. Make sure you have it inside a directory in terminal. Then only it will work the commands. This is because we are using ionic commands. 

ionic generate page progress-bar 

Once you have tried the above commands it will automatically create a page. You can see something like this. 

Progress bar

If you don’t want to use commands you can manually create a page separately like html file and typescript file and scss file. In this example I have initialized styles in index.html file. 

Step 2:

Use the following lines for designing the html part for the progress bar. 


<div class=”progress-outer”> 

  <div class=”progress-inner” [style.width]=”progress + ‘%'”> 




Step 3 : 

Use the following lines for component part for progress bar typescript file. 


import {Component, Input} from ‘@angular/core’; 


  selector: ‘progress-bar’, 

  templateUrl: ‘progress-bar.html’ 


export class ProgressBarComponent { 

    @Input(‘progress’) progress; 

     public constructor() { } 


Here this component used the Input property. It is used to pass a data in parent component to child component. 

SharePoint Intranet Software

Step 4: 

You can use this style for designing your progress bar for convenience of use. You can also use this whenever your component.css file or index.html file is needed. 


.progress-outer { 

    width: 96%; 

    margin: 10px 2%; 

    padding: 3px; 

    text-align: center; 

    background-color: #f4f4f4; 

    border: 1px solid #dcdcdc; 

    color: #fff; 

    border-radius: 20px; 


  .progress-inner { 

    min-width: 15%; 

    white-space: nowrap; 

    overflow: hidden; 

    padding: 5px; 

    border-radius: 20px; 

    background-color: green; 


By calling wherever your app html file, use this line. 

<progress-bar [progress]=”loadProgress“></progress-bar> 

After initializing, these are the steps for creating progress bar in component typescript file. 

public loadProgress : number = 0;   //here I am initialized value with 0 

ngOnInit() { 

    // Test interval to show the progress bar 

    setInterval(() => { 

      if (this.loadProgress < 100)   //check the condition for the value of variable is below 100 or not. 

        this.loadProgress += 1; //here iam incrementing value with previous one for showing numbers like 1-100 


        clearInterval(this.loadProgress);  //here value of variable is above 100 then we have to stop the process. 

    }, 50);

Sharing is Caring!

Leave a Reply

Your email address will not be published. Required fields are marked *