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: [
BrowserModule,
IonicModule.forRoot(MyApp),
HttpModule,
RoundProgressModule
]

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">
</round-progress>

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

https://github.com/crisbeto/angular-svg-round-progressbar

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

max=100
current=35

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

Full Source for this demo.

https://github.com/bharathirajatut/ionic3/tree/master/RoundProgressBarExample

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

System:

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