How to make element border fill animation?

Question

css

Here we have an element - a circle with border: 5px solid #333; , and the number inside the circle is 0%.
The task is this: you need to have an animation - filling the border clockwise with a different color and so that the number changes smoothly from 0%, say, to 74%. Moreover, so that the filling of the border of the circle is directly proportional to the percentage of the number inside the circle.

Given:



It is necessary (but only that the filling with a green border comes from the center of the top):

Answer 1

First links on google:
blakek.us/labs/jquery/css3-pie-graph-timer
Pure CSS animation: jsfiddle.net/RrAVS