Arc shaped Progress bar

silambarasan-r commented 4 years ago

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

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

luguiant commented 4 years ago

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

silambarasan-r commented 4 years ago

@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

crisbeto / angular-svg-round-progressbar

Arc shaped Progress bar #198