Responsive Circular Progress Bar

See the Pen Responsive Circular Progress Bar by Daniel Watts (@wattswork) on CodePen.

Built using SVG circles. The progress is calculated by lengthening the gap-spacing in the dash of the stroke around the circles. The resizing takes in to account the stroke widths so the shape stays snug against it’s container.