Ionic Progress circle

Ionic Native
1

How to make Ionic 3 using Progress circle im try to used this one
angular-svg-round-progressbar but its not work for me

my error

er
er.jpg1900×814 162 KB

2

What error do you get?
If you don’t specify where the issue occurs; we can’t help you.

3

Sir , im getting this error

er
er.jpg1900×814 162 KB

4

Can you show your HTML and code where you define the parameters for the progress-circle?

1 Like
5

pages/home/
home.html

<ion-content padding>
  <round-progress [current]="current" [max]="max" [stroke]="stroke" [radius]="radius" [semicircle]="semicircle" [rounded]="rounded"
    [responsive]="responsive" [clockwise]="clockwise" [color]="gradient ? 'url(#gradient)' : color" [background]="background"
    [duration]="duration" [animation]="animation" [animationDelay]="animationDelay"></round-progress>
</ion-content>

home.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import {RoundProgressModule} from 'angular-svg-round-progressbar';

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
       RoundProgressModule
  ],
})
export class HomePageModule { }

home.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';


@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {
  current: number = 27;
  max: number = 50;
  stroke: number = 15;
  radius: number = 125;
  semicircle: boolean = false;
  rounded: boolean = false;
  responsive: boolean = false;
  clockwise: boolean = true;
  color: string = '#45ccce';
  background: string = '#eaeaea';
  duration: number = 800;
  animation: string = 'easeOutCubic';
  animationDelay: number = 0;
  animations: string[] = [];
  gradient: boolean = false;
  realCurrent: number = 0;
  rate:number;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }


}
1 Like
6

@watsonic to solve it install v1.1.1 ‘npm install angular-svg-round-progressbar@1.1.1 --save’ also I add it on ‘app.module.ts’