CODEWITHSUNDEEP
htmlcssprogress-barpie-chart
3loY
3loY

Reputation: 19

Oval progress bar || pie chart

How to create regulated oval progress bar using only HTML&CSS?

need to create like this one

My jsfiddle try works but looks different (without inside\outside border or padding)

<svg viewBox="0 0 64 64" class="pie">
   <circle class="background" r="25%" cx="50%" cy="50%"></circle>
   <circle class="chart" r="25%" cx="50%" cy="50%" stroke-dasharray="85 100"></circle>
</svg>

enter image description here

Upvotes: 0

Views: 541

Answers (1)

Anton Rashchenko
Anton Rashchenko

Reputation: 81

I'm not sure this is what youre looking for but cant hurt looking right?

So here is my example: https://jsfiddle.net/b3h0tqye/57/

I simply changed the following lines:

<circle class="background" r="27%" cx="50%" cy="50%" style="stroke-width:1;"></circle>
 <circle class="background" r="22%" cx="50%" cy="50%" style="stroke-width:1;"></circle>

Upvotes: 2

Related Questions