Как сделать заполняющийся «спидометр»?

Question

[alaskafx]

Есть html:
<div class="circle"></div>

Есть css:

.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;           
}

Как можно сделать так, что бы он "заполнялся" зеленым цветом(т.е. его бордер)?

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

Answer 1

[Максим]