How to make a filling "speedometer"?

Question

css

There is html: There is css:
<div class="circle"></div>

.circle{
    width: 300px;
    height: 176px;
    background-color: none;
    border-top-left-radius: 160px;
    border-top-right-radius: 160px;
    border: 10px solid white;
    border-bottom: 0;
    position: absolute;
    z-index: -1;           
}

How can I make it "fill" with green (i.e. its border)?

Codepen: https://codepen.io/akaskafx/pen/bGWbrGG

Answer 1