Ionic 3 don't have the built-in round progress bar UI component. In this tutorial, I am going to explain, how to create a round progress bar using the Ionic 3.

Preview of the round progress bar(Browser)

Create a new Ionic 3 project using.

ionic start app blank

Install the round progress bar component using the npm.

npm install angular-svg-round-progressbar --save

Import the RoundProgressModule to the app.module.ts file 

import {RoundProgressModule} from 'angular-svg-round-progressbar';

And include it in the imports of the app.module.ts file.


imports: [

Add the below code to the home.html file.

<h3>Full Circle Example</h3>
  <round-progress [current]="current"
 [radius]="45" [color]="'#4801b8'" 
[stroke]="5" [max]="max"></round-progress>

  <h3>Semi Circle Example</h3>
  <round-progress [semicircle]="true" 
[current]="current" [color]="'#4801b8'" 
[radius]="45" [stroke]="5" [max]="max">

The round-progress is the Angular component. To know more about the round progress bar.

Declare the max and current variable in the home.ts file.


That's all. You can now preview the round progress bar using ionic serve --lab command on your terminal.

Full Source for this demo.

Below is the Ionic 3 information while testing the code.

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.9.2


    ios-sim : 5.0.13
    Node    : v6.10.0
    npm     : 5.6.0
    OS      : macOS High Sierra
    Xcode   : Xcode 9.1