Pav Sidhu Pav Sidhu - 1 month ago 10x
Sass (Sass) Question

Correct orientation of a circular progress bar with SVG

I'm creating a circular progress bar with Sass, with the following code the progress bar starts at 3 o'clock. I want it to start at 12 o'clock instead though I'm not sure how.

$radius: 50
$circumference: (3.14159265359 * (2 * $radius))

$percent: 85
$stroke_percentage: $circumference - (($percent / 100) * $circumference)

@keyframes circleIconProgress
stroke-dashoffset: $stroke_percentage

stroke-dasharray: $circumference
stroke-dashoffset: $circumference

How would I do this? Thanks.


You will need to rotate your circle 90 degrees anti-clockwise. For example:

<circle ...  transform="rotate(-90, 75,75)"/>

where (75,75) is the coordinates of the centre of your circle.