bootsoon / ng-circle-progress Goto Github PK

Thanks for this component. It's very useful for me.
In need something like this.

If you know how to make this using existing functionality please help me.
If no, I suggest to add innerRadius, outerRadius,

Hello guys,

Is there any onFinish-like output event to this great timer?

Am i missing something here?

i getting below error
message: "Object(...) is not a function"
CircleProgressComponent/this.animate@webpack-internal:///./node_modules/ng-circle-progress/index.js:310:44\nCircleProgressComponent/this.render@webpack-internal:///./node_modules/ng-circle-progress/index.js:80:17\nCircleProgressComponent.prototype.ngOnChanges@webpack-internal

<circle-progress name="progress-bar" item-left [percent]="23" [radius]="100" [outerStrokeWidth]="16" [innerStrokeWidth]="8" [outerStrokeColor]="'#0094db '" [innerStrokeColor]="'#0094db91 '" [animation]="true" [animationDuration]="300" [toFixed]="2"></circle-progress>

Hi Team,

When we click on center position of ng-circle-progress component, the progress bar start to load from 0. Is there any property to remove the click event on ng-circle-progress?

Regards,
Paras

Hi there,
first of all thank you for this awesome component.

I have one issue with the option "maxPercent". How exactly does it work? I don't see any changes if i increment or decrement its value.

P.S.:
There are two small issues in the README (html part). The commas after the values of [outerStrokeWidth] and [innerStrokeWidth] must be removed. Further it is necessary to add single quotes before and after the hex values:

[outerStrokeColor]="'#78C000'"
[innerStrokeColor]="'#C7E596'"

I use this package a lot. It works great!.
My question is, Can this plugin add animation in the field title?. I need to apply an animation with the progress increment.

I upgraded angular to v6, and rxjs to @6.1.0
I get an error

Module not found: Error: Can't resolve 'rxjs/Rx' in /home//a5/node_modules/ng-circle-progress '```

Hello, I was wondering if there was a way to access the padding of the title as it seems to be closer to the top than in the middle. And also if we could affect the font-weight?

Hi! can anyone help me. i want the percentage to be different then the number in the middle. i want a counter in the middle and the progress in the bar. is this possible

Hi,

I'm trying to make a 0-10 circle but when I pass [maxPercent]="10" it still defaults to 100.

Thanks!

any chance you could publish the angular 6 changes to npm?

It would be very useful to expose a show/hide flag in order to turn the circle on when starting and hide it when at 100%.

Hi, I tried ng-circle-progress it works smoothly for me.

But I have one issue with this, I want to generate small size circles only (ex: radius=10px). but when I pass radius=10 , circle size is still around 100x100 (radius around 50px)

<circle-progress
[percent]="85" [radius]="10"
[outerStrokeWidth]="4"
[innerStrokeWidth]="2"
[space]="-4"
outerStrokeColor="#82c42d"
innerStrokeColor="#d8e3e6"
[showSubtitle]="false"
[showUnits]="false"></circle-progress>

I looked into circle-progress.component.ts code then I found one condition there It sets radius=50 if it is less then 50. Is there issue if we allow to generate small circles..
https://github.com/bootsoon/ng-circle-progress/blob/master/src/circle-progress.component.ts#L219

Hi Bootsoon,

I am getting the below error when trying other then app.component.ts,

caught Error: Template parse errors:
Can't bind to 'percent' since it isn't a known property of 'circle-progress'.

1. If 'circle-progress' is an Angular component and it has 'percent' input, then verify that it is part of this module.
2. If 'circle-progress' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
   <span *ngIf="field['overview']">
   
   
   <circle-progress [ERROR ->][percent]="85" [radius]="100" >
   
   
   
   "): ng:///AppRouteModule/PluginmediaComponent.html@11:29
   Can't bind to 'radius' since it isn't a known property of 'circle-progress'.
4. If 'circle-progress' is an Angular component and it has 'radius' input, then verify that it is part of this module.
5. If 'circle-progress' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
6. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <span *ngIf="field['overview']">
   
   
   <circle-progress [percent]="85" [ERROR ->][radius]="100" >
   
   
   
   "): ng:///AppRouteModule/PluginmediaComponent.html@11:44
   'circle-progress' is not a known element:'

I have added the
app.module.ts

@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [Http]
}
}),
NgCircleProgressModule.forRoot({
radius: 100,
outerStrokeWidth: 16,
innerStrokeWidth: 8,
outerStrokeColor: '#78C000',
innerStrokeColor: '#C7E596',
animationDuration: 300,
}),
BsDropdownModule.forRoot(),
ProgressbarModule.forRoot(),
AppRouteModule
],

some.component.ts
<circle-progress [percent]="85" [radius]="100" >

and installed using
npm install ng-circle-progress --save

i am using angular 4 application.
"angular/common": "~4.4.6",
"angular/compiler": "~4.4.6",
"angular/core": "~4.4.6",
"angular/forms": "~4.4.6",

Can you please help me to over come this issue or need to do some setting.

I get the following error after updating to use rxjs-compat/Rx. It seems the observable is found but the CircleProgressComponent has an issue? Any thoughts on how to resolve?

TestComponent.html:309 ERROR Error: StaticInjectorError(AppModule)[CircleProgressComponent -> CircleProgressOptions]:
StaticInjectorError(Platform: core)[CircleProgressComponent -> CircleProgressOptions]:
NullInjectorError: No provider for CircleProgressOptions!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:979)
at resolveToken (core.js:1232)
at tryResolveToken (core.js:1182)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077)
at resolveToken (core.js:1232)
at tryResolveToken (core.js:1182)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077)
at resolveNgModuleDep (core.js:9238)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9919)
at resolveDep (core.js:10284)

I'm using angular 6 and I want to use ng-circle-progress. I implemented the circles but I want to change something that I think I should do it from the src code. there is a units and title options in the circles and I want them to get closer to each other. How can I do it?

app.module.ts

import {
  NgCircleProgressModule
} from 'ng-circle-progress';

imports: [
  CommonModule,
  RouterModule.forChild(HomeRoutingModule),
  NgCircleProgressModule.forRoot({
    "units": "Liter",
    "outerStrokeLinecap": "butt"
  })
]

home.component.html
<circle-progress [percent]="65" [radius]="100" [outerStrokeWidth]="8" [innerStrokeWidth]="2" [outerStrokeColor]=tank.outerColor [innerStrokeColor]="'#e2e2e2'" [animation]="true" [animationDuration]="300" [space]="5" [showSubtitle]= "false" [showUnits]= "true" [unitsFontSize]= "15" [titleFontSize]= "45" [clockwise]= "false"> </circle-progress>

and this is the image of output. how can I control the space between 65 and liter?

I want image inside a progress bar is there a way?

Is it possible to make a semicircle instead a full circle?
Thank you!

is it possible to add image inside the progress ??
as we see already text and some content already in their..so is there way to add image inside it ??

I am implementing this library for showing the progress bar. it's working with constant data but when I'll bind the data with the API response it's not working, Every time I need to click on module then it will work. Please look at that issue.

Code Implementation below with steps:

Step 1: npm install [email protected] --save

Step 2: import { NgCircleProgressModule } from 'ng-circle-progress';
@NgModule({
imports: [
MomentModule,
CommonModule,
BootstrapModule,
ReactiveFormsModule,
FormsModule,
SharedModule,
ChartModule,
ModalModule.forRoot(),
RouterModule.forChild([
{
path: '',
component: DashboardComponent
}
]),
NgCircleProgressModule.forRoot({})
],
declarations:[],
exports: [],
providers: [],
entryComponents: []
})

Step 3: <circle-progress class="circle-progress" [renderOnClick]="false" [percent]="donutChart.filled_percentage" [radius]="100"
[outerStrokeWidth]="16" [innerStrokeWidth]="8" [outerStrokeColor]="'#78C000'" [innerStrokeColor]="'#C7E596'" [animation]="true"
[animationDuration]="300">

I hope I'll get the updates soon.
Thanks,

titleFontSize changed from 20(default) to an other size, then Title is not center alignment

I am getting this error in Angular 5 now.
//------------------------------------------------------------
Object(...) is not a function.
//------------------------------------------------------------
It worked fine with version 1.0.0. Should I use 1.0.0 for later use in Angular 5?

I am implementing this library for showing the progress bar. it's working with constant data but when I'll bind the data with the API response it's not working, Every time I need to click on module then it will work. Please look at that issue.

Code Implementation below with steps:

Step 1: npm install [email protected] --save

Step 2: import { NgCircleProgressModule } from 'ng-circle-progress';
@NgModule({
imports: [
MomentModule,
CommonModule,
BootstrapModule,
ReactiveFormsModule,
FormsModule,
SharedModule,
ChartModule,
ModalModule.forRoot(),
RouterModule.forChild([
{
path: '',
component: DashboardComponent
}
]),
NgCircleProgressModule.forRoot({})
],
declarations:[],
exports: [],
providers: [],
entryComponents: []
})

Step 3: <circle-progress class="circle-progress" [renderOnClick]="false" [percent]="donutChart.filled_percentage" [radius]="100"
[outerStrokeWidth]="16" [innerStrokeWidth]="8" [outerStrokeColor]="'#78C000'" [innerStrokeColor]="'#C7E596'" [animation]="true"
[animationDuration]="300">

I hope I'll get the updates soon.
Thanks,

I apologize, I found this issue solved in issue #21

Hi ,

I am using this component in my project , but what i found is that it is not showing at first time inside the main component but shown second time (mean at the time of another event fire in any where in the application ) . can you tell me the what can be the root cause for that .

Here can we add value more then 100 or less then 100? Because If I want to display 80/150

e.g. I have total 150 value and 80 is fill-up

see below example:
http://crisbeto.github.io/angular-svg-round-progressbar/http://crisbeto.github.io/angular-svg-round-progressbar/

I needed to Have Custom title for Each Dynamically generated chart, without needing to implement a callback function using [titleFormat] option.
to work with my code

<div class="col-md-4" *ngFor='let usage of usages,let i = index'>
                <div class="circle-progress">
                        <div class="circle-radius hide" ></div>				
                        <circle-progress 
                        [percent]="usage.usagePercentage"
                        [outerStrokeColor]="usage.type"
                        [backgroundStroke]="usage.type"
                        [titleColor]="usage.type"
                        [subtitleColor]="usage.type"	
                        [unitsColor]="usage.type"
                        [space] = "0"	
                        [showUnits]="false"
                        [animateTitle]="false"
                        [title]="usage.englishDisplayName"
                        [subtitle]="usage.englishSubName"
>
                        </circle-progress>
                    </div>
                    <p class="text-center text-primary"><strong>{{usage.usedAmount}} {{'AccountOverview.of' |translate}} {{usage.initialTotalAmount}} 
                        <small *ngIf="this.translationService.language=='Ar'">{{usage.measureUnitArName}}</small><small *ngIf="this.translationService.language=='En'">{{usage.measureUnitEnName}}</small></strong> <em class="icon-{{usage.mesaureUnitId}}"></em></p>					
                    
        </div>

I managed to Achieve that by editing in the plugin files which is a terrible thing to do of course,
Is there a possibility that you support this feature soon?
@bootsoon
I have attached the edited files FYI.

ng-circle-progress Modified Files.zip

hello, im trying to use your plugin but i have a problem. after my imports it doesnt work in my ionic 2 app.
1)app module:

2. home page for ex.
   

3)the error.

pls help me) thx for attention

Hello!

Is it possible to remove the outer stroke when the bar is at 0%?

Great plugin btw!

Am currently working on an application where the users can upload multiple files simultaneously. I intend to use the circle progress component to show upload progress for each of the files being uploaded. Is that currently possible?

It possible to create nested progress bars?

So currently I make the innerStroke be 0 then the 85% will show up in the top inside of the outerStroke So I want make 85% be in the center in the outerStroke. Is there any property can control of that?

hi,

i need help to put the unit in new line so the ui could look like:

• line for value its long (timestamp)
• line for unit its long also
• lint for subtitle

thanks in advance

Hello Can we achieve this using this plugin

I would like to create this with arrow. Can we achieve using this

Similar like below

Is there any way to add html to the title or subtitle. it would be great to be able to show an icon for example in the title.

I read previous issues about max percent and as far as I can see circle is always acting like max is 100 if I set value lower than 100.
E.g. I want my circle always be completed (percent and max percent same values), but it works only if percent and maxPercent are >=100.
For lower values I can see + by the title value, but it is not ok if my circle is partially completed.

I am getting the following warning for a new angular 5 project.

how can i get this type of circle progress. i am using correct one for this. Any suggestions please

Is it possible to add a color gradient to the progress bar?
Thanks

From: https://stackoverflow.com/questions/44450530/circle-progress-with-angular-4

Hi Team,
I am facing below issue. My application is in angular 4, in VS2017. I have added package as suggested of version 1.0.0.

Error: XHR error (404 Not Found) loading http://localhost:18520/ng-circle-progress
at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:18520/node_modules/zone.js/dist/zone.js:1056:39)
at ZoneDelegate.invokeTask (http://localhost:18520/node_modules/zone.js/dist/zone.js:424:31)
at Zone.runTask (http://localhost:18520/node_modules/zone.js/dist/zone.js:191:47)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:18520/node_modules/zone.js/dist/zone.js:486:38)

Kindly suggest.
Thanks

please

Hello,

I have integrated 'ng-circle-progress' into an ionic(ionic 3) projects. I face an issue, the animation won't start until I clicked on any of the buttons on the screen. If I clicked on any of the buttons on screen than animation work smoothly.

Here is the code:-

HTML file:-

   <circle-progress [percent]="feed.isPercentage" [animation]="true"></circle-progress>

app.module.ts:-

NgCircleProgressModule.forRoot({
      radius: 10,
      space: -10,
      outerStrokeWidth: 1,
      outerStrokeColor: "#2c383f",
      innerStrokeColor: "#2c383f",
      innerStrokeWidth: 0,
      title: "",
      animateTitle: false,
      animationDuration: 1000,
      showUnits: false,
      showBackground: false,
      clockwise: true,
      showSubtitle: false,
      showTitle: false
    })

Other informations:-

cli packages: ()

    @ionic/cli-utils  : 1.18.0
    ionic (Ionic CLI) : 3.18.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.2
    Cordova Platforms  : android 6.3.0 ios 4.6.0-nightly.2017.11.22.24bfb734
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2
    Node       : v6.11.2
    npm        : 5.5.1
    OS         : macOS High Sierra
    Xcode      : Xcode 9.1 Build version 9B55

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

i wanted to make the whole screen transparent except the progress loader but it didnt work out, if im missing something please let me know

I'm using angular 5 and I want to draw a circle-progress chart that shows two item changes in one chart! how can I implement it? I need something like this picture:

as you see, the yellow part and the blue part are totally separated and show different numbers but they are in a unit chart.

i have very long title and i want tobreak it to two lines i tried with (but didn't work) :

formatSubtitle = (percent: number) : string => {
return "11111111111111111111 \n 222222222222222"
}
and i tried this also

formatSubtitle = (percent: number) : string => {
return "11111111111111111111
222222222222222"
}

I tried changing the title by setting to

<circle-progress
  [percent]="85"
  [radius]="100"
  [space]="-10"
  [outerStrokeWidth]="10"
  [innerStrokeWidth]="10"
  [outerStrokeColor]="'#78C000'"
  [innerStrokeColor]="'#C7E596'"
  [animation]="true"
  [animationDuration]="300"    
  [showTitle]="true"
  [title]="UI"
  [subtitle] = "HTML"
  [showUnits]= "true"
></circle-progress>

In module,

config = {
  "backgroundOpacity": "1",  
  "animateTitle": false,
  "animationDuration": 1000,  
  "showBackground": false,
  "clockwise": true,  
}

in Import Array :

NgCircleProgressModule.forRoot(this.config),

Please let me know, if I am missing something

Thanks
:)