html - How to style an HTML5 Progress Element as Circle/Pie with pure CSS

Question

HTML5 introduced a new "progress" element that by default is rendered as a progress bar (thermometer).

A very basic example is:

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

I have been experimenting with a variety of progress circle options using javascript, and also have been really impressed by some pure CSS approaches discussed here: CSS Progress Circle

I am interested to know if anyone has successfully applied CSS to the "progress" element to provide a pie/clock/circle rendering rather than a linear display?

EDIT/ADDENDUM: The "meter" element is also quite similar to "progress" but provides for a low/high range...I mention this more for anyone who might stumble upon this post in the future and want to apply a similar technique to the HTML5 meter element.

Answer 1

Trying to do this in pure CSS is quite hard, so I don't think than this is the correct technique to do it.

Anyway, just as a technical exercise, let's try it. (Tested only in Chrome !)

First of all the basis. We are going to divide the circle in 4 quadrants, and for each one we will need a different style. Here we have the styles, showing in color (green, red, blue, yellow) the useful range of the progress value element. The gray area is the rest of the element, unused.

.test {
  width: 100px;
  height: 100px;
  margin: 20px 10px 0px 20px;
  border-radius: 50%;
  background-image: radial-gradient(lightblue 62%, blue 40%);
  position: relative;
  display: inline-block;
}

.test div {
height: 30%;
transform-origin: left top;
    position: absolute;
    opacity: 0.5;
ackground-color: green;
}

.inner1 {
width: 25%;
left: 50%;
    top: -20%;
background-color: green;
transform: rotate(45deg) scaleX(3.9598);
}

.inner2 {
width: 50%;
left: 190%;
    top: -20%;
background-image: linear-gradient(to right,gray 50%, red 50%);
transform: rotate(135deg) scaleX(3.9598);
}

.inner3 {
width: 75%;
left: 190%;
    top: 260%;
background-image: linear-gradient(to right,gray 66%, blue 66%);
transform: rotate(225deg) scaleX(3.9598);
}

.inner4 {
width: 100%;
left: -230%;
    top: 260%;
background-image: linear-gradient(to right,gray 75%, yellow 66%);
transform: rotate(315deg) scaleX(3.9598);
}

<div class="test">
    <div class="inner1"></div>
</div>
<div class="test">
    <div class="inner2"></div>
</div>
<div class="test">
    <div class="inner3"></div>
</div>
<div class="test">
    <div class="inner4"></div>
</div>