Jamal Ahmad Jamal Ahmad - 5 months ago 61
TypeScript Question

How to design circle progress bar in ionic 3?

how to create circular progress bar in ionic 3. i am new in ionic.
i already tried to install

npm install jquery-circle-progress


package link here

it installed perfect but i am confuse that how to use it in ionic?
please guide me.Thanks in advance

Update:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ProfilePage } from './profile';
import { RoundProgressComponent } from 'angular-svg-round-progressbar';

@NgModule({
declarations: [ ProfilePage, ],
imports: [IonicPageModule.forChild(ProfilePage), ], })

export class ProfilePageModule {}

Answer Source

You can't use above mentioned jquery progress bar with Ionic.You have to use an Angular module for that.

Here is the one which you can use.

Demo

Git Repo

enter image description here

Steps:

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

After that you need to import the RoundProgressModule in your module as shown below:

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

@NgModule({
  imports: [RoundProgressModule]
})
export class YourModule {};

Update:

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

       @NgModule({ 
           declarations: [ ProfilePage, ],
           imports: [IonicPageModule.forChild(ProfilePage),
                     RoundProgressModule],
           }) 

           export class ProfilePageModule {}