How can I create a circular progress bar using only CSS?

Circular progress bars are a fairly common element in today's websites. Yet, to many developers, they seem like quite the intimidating challenge. The truth of the matter is that getting the basics right is not that hard. In fact, with the help of some new CSS features, it's easier than ever.
A circular progress bar is, at the simplest, two circles stacked on top of each other. The bottom circle is the background, and the top circle is the progress indicator. We'll get to how we fill the progress indicator in a bit, but the basic structure can be easily built using an <svg> element and a little bit of CSS.
As you can see, the only piece of CSS we need to get the basic structure right is a transform property. We rotate the foreground circle by 90 degrees, and we set the transform-origin to the center of the circle. This way, the circle is rotated around its center, and the progress indicator starts at the top.
Before we move forward, we might as well take a moment to understand the math behind the code.
The two values we need to decide are the size of the progress bar and the width of the stroke. For this example, we settled on a size of 250px and a stroke width of 20px. We'll use these values to calculate the rest of the values we need.

<svg width="250" height="250" viewBox="0 0 250 250">
  <circle class="bg"
    cx="125" cy="125" r="115" fill="none" stroke="#ddd" stroke-width="20"
  ></circle>
  <circle class="fg"
    cx="125" cy="125" r="115" fill="none" stroke="#5394fd" stroke-width="20"
  ></circle>
</svg>

As you can see, the only piece of CSS we need to get the basic structure right is a transform property. We rotate the foreground circle by 90 degrees, and we set the transform-origin to the center of the circle. This way, the circle is rotated around its center, and the progress indicator starts at the top.
Before we move forward, we might as well take a moment to understand the math behind the code.
The two values we need to decide are the size of the progress bar and the width of the stroke. For this example, we settled on a size of 250px and a stroke width of 20px. We'll use these values to calculate the rest of the values we need.
The size is use to set the width and height attributes of the SVG element, as well as the viewBox attribute. Dividing it by two, we get 125px, which corresponds to the coordinates of the center of the image. This value is used to set the cx and cy attributes of the circles.
Taking into account the stroke width, we can calculate the radius of the circle. The radius is the distance from the center of the circle to the edge. In this case, the radius is 115px, which is the size of the image, minus the stroke width, divided by two.
Finally, we can calculate the circumference of the circle. The circumference is the length of the edge of the circle. In this case, the circumference is 722.5px, which is 2 π 115px.

From 30-seconds-of-code: circular-progress-bar