1

Information

I am trying to figure out how to create an ARC progress bar using 

<progress value="" max =""></progress>

I have seen a lot of examples using divs as well as a few on SVG however I believe it is better to use the actual progress html tag as it is not only clear to it's intent but also it beneficial from an accessibility perspective.

Here are two examples, the first using svg and the second using divs:

Now I know for a progress bar I can select two different attributes of the progress tag:

progress[value]::-webkit-progress-value
progress[value]::-webkit-progress-bar

With these I can control for example the progress bar as well as the value to change appearance, rotation, etc.

Question

How to I create an arc progress bar using css3 as well as the appropriate <progress></progress> html tag?

UPDATE I have seen example of others using the border radius to create the curve 

border-radius: 50%/100px 100px 0 0;

I am having trouble to get it to work with the <progress> but I think it may be a possibility.

halfer
  • 19,824
  • 17
  • 99
  • 186
L1ghtk3ira
  • 3,021
  • 6
  • 31
  • 70
  • I'm not sure what your question is, you seem to have answered it yourself. – Rob Rose Apr 25 '18 at 18:10
  • I have not. The problem Is the by default is just horizontal. I would like to make it as an arc to look nice such as the first example. In the example they use div or SVG I cannot use these as it will cause accessibility issues. I tried to use similar css to the divs but the does not look good. – L1ghtk3ira Apr 25 '18 at 18:23
  • I am closing your question since I think that my answer linked is what you are looking for, specially the second snippet. But we aware that this will work only in webkit based browsers – vals Apr 25 '18 at 20:16

0 Answers0