crisbeto / angular-svg-round-progressbar

Angular module that uses SVG to create a circular progressbar

Home Page:https://crisbeto.github.io/angular-svg-round-progressbar/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Arc shaped Progress bar

silambarasan-r opened this issue · comments

There are two options only available - Circle and Semi-Circle.

I'm looking for Arc shaped progress bar. Please suggest me any possible solution.

I also need the same, I must put the arches customize radius, position is left, right, up or down

@luguiant
Its been 5 months, since I created this issue but I got no luck with this plugin. So I moved to use another plugin for Progress bar. its 'ngx-gauge'.

You can use ngx-gauge plugin.

HTML:

<ngx-gauge [thick]="22" [type]="'arch'" [size]="175" [value]="80"
        [foregroundColor]="'#ff7105'" [backgroundColor]="'gray'" duration="1000">
        <ngx-gauge-value>80%</ngx-gauge-value>
</ngx-gauge>

SCSS:

ngx-gauge-value {
     font-size: .8em;
     font-family: var(--ion-font-family);
     color: #fff;
 }

 ngx-gauge .reading-block,
 ngx-gauge .reading-block * {
     color: #fff;
 }

Hope it helps. for more detailed configuration see this link https://github.com/ashish-chopra/ngx-gauge#readme