Ionic round progressbar

To integrate this first we need to install the below module with the help of npm :

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

After installing this you need to import the RoundProgressModule in your module file :

import {NgModule} from '@angular/core';
import {RoundProgressModule} from 'angular-svg-round-progressbar';

@NgModule({
  imports: [RoundProgressModule]
})


Now in your page TS file add below lines -

export class RatePage {

  public selectedRange=0;

  
  constructor(public navCtrl: NavController) {

}

  close(){
    alert(this.selectedRange)
  }

  save(){
    alert(this.selectedRange)
  }

}


Now add below code in your html file -

<div class="main_box">
<div class="box">

 <div class="current">{{ selectedRange }}/{{ 100 }}</div>
 <round-progress
 [current]="selectedRange"
 [max]="100"
 [color]="'#45ccce'"
 [background]="'#eaeaea'"
 [radius]="80"
 [stroke]="20"
 [semicircle]="false"
 [rounded]="true"
 [clockwise]="true"
 [responsive]="false"
 [duration]="800"
 [animation]="'easeInOutQuart'"
 [animationDelay]="0"></round-progress>


<ion-range min="0" max="100" [(ngModel)]="selectedRange" color="secondary">
 <ion-label range-left>0</ion-label>
 <ion-label range-right>100</ion-label>
</ion-range>


<ion-row class="row">
 <ion-col class="col" col-6="">
     <button (click)="save()" class="login-btn button button-md button-default button-default-md" ion-button="" type="submit"><span class="button-inner">Submit
     </span><div class="button-effect"></div></button>
 </ion-col>
 <ion-col class="col" col-6="">
   <button (click)="close()" class="login-btn button button-md button-default button-default-md" ion-button="" type="submit"><span class="button-inner">Cancel
   </span><div class="button-effect"></div></button>
</ion-col>
</ion-row>


</div>

</div>


Add below code in your CSS file -

.scroll-content{
    padding: 0px !important;
}
.box{ margin: 0% 5%; padding: 0px 10px; font-size: 1.4rem; height: 60%; background-color: #fff; opacity: 1 !important; margin-top: 20%; border: 1px solid gray; }

round-progress{
    margin: 20% 25% 0% 25%;
}
.main_box{
    height: 100%;
}
[col-6]{
    text-align: center;
}
.range-md .range-knob, .range-ios .range-knob{
    width: 30px;
    height: 30px;
}
.range-md .range-bar, .range-ios .range-bar{
    top: 28px;
}
.label-md, .label-ios{ margin-top: 16px !important;}
.current {
    position: absolute;
    margin: 34% 25% 0% 35%;
    font-weight: 400;
    font-size: 2rem;
}


You can check more details on below link, also other options are available on below link -
https://github.com/crisbeto/angular-svg-round-progressbar

Check below demo link -
http://crisbeto.github.io/angular-svg-round-progressbar