Circular Progress Bar Using SVG | HTML | CSS | JS

in this video we'll learn how to create a circular progress bar using svg to start with let's create a svg with a width and height of 250 pixels let's add a circle with a radius of 100 pixels and cx and cy is the midpoint of the circle this value can be in pixels or in percentage the circle's midpoint would be at 125 pixels from left and 125 pixels from top of the screen let's give this circle a class name called track which would have a border of light gray let's take out the black fill color create another circle to show the progress and let's give it a class name called progress let's give it a border of black color and the thickness of 10 pixels stroke dash array creates a dashed line along the circumference of the circle since value is 20 it creates a line of 20 pixels in a gap of 20 pixels until it completes the entire length of the circle as we increase this value the stroke length on the circumference keeps increasing at the same time an equal sized gap is also created let's further increase the values to 200 500 and 630 and see how it looks at this point in time we have a stroke which is 630 pixels in length which covers the full circle and also a gap of same length which is not visible there's also another css property called stroke dash offset which helps us in revealing the gap and by setting appropriate stroke dash offset value we can show the progress in a nutshell lower the stroke dash offset value higher the progress which means if offset is 630 then progress is 0 and if offset is 0 then progress is 100 percent let's write a quick javascript code to make the progress dynamic which shows the progress from 0 to 100 let's now target the progress class and pull its radius value which is 100. let's calculate the circumference using the radius value which would give us the precise length of the circle's border or stroke and assign it to stroke dash array of the circle and take out the dash array and offset from progress class let's set the progress between a scale of 0 and 100 using a small function like so in this function we are setting the stroke dash offset by negating part of the circumference from its total length by converting the circumference value in percentage with this we can now set the circular progress bar's value dynamically like so if we look at the progress it starts at 0 degree right here and moves downward if you want the progress to start from the top then just rotate the progress circle by 270 degree or minus 90 degree and set the transform origin to center thanks for watching like share and subscribe if you found this video helpful see you in the next one cheers you

Channel: UI Code

Views: 14,040

Keywords:

Id: f7XUZFexSgo

Length: 5min 24sec (324 seconds)

Published: Thu Jul 16 2020