Solution 1 :

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

So here is my example:

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>

Problem :

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 insideoutside 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>

enter image description here


Comment posted by m4n0

What do you mean by that it looks different?

Comment posted by 3loY

My variant without inside and outside border.

Comment posted by

Is there best way to regulate progress percentage without stroke-dasharray? Because its not work correct, example:


Leave a Reply

Your email address will not be published. Required fields are marked *