Pav Sidhu Pav Sidhu - 2 months ago 17
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
to
stroke-dashoffset: $stroke_percentage

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


How would I do this? Thanks.

Answer

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.

Comments