Home

Javascript/CSS Circle Progress Bar that progress in both direction

how can I create a circle progress bar that expands in both clockwise + non clockwise direction from the starting point?

here is my progress so far: https://jsfiddle.net/qchygknu/

I have tried using svg to draw the circle and using stroke-dasharray and stroke-dashoffset but I cannot set the starting point and it can only expand in 1 direction, I need the progress bar to expand on both direction when the dot is clicked

progress bar that expands in both clockwise + non clockwise direction from the starting point

I need to learn the code so I can apply it to the below circular menu:

Step 1

Step 1

Step 2

Step 2

Step 3

Step 3

Step 4

Step 5

Each time the Black Dot is clicked, the progress bar will expand in both direction to 120 degrees

Asked on July 16, 2020 in CSS.
Add Comment
Cancel
0 Answer(s)

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.