How to create circular progress bar using html,css & javascript | in Tamil | Dk technologies

How to create circular progress bar | Circular Progress Bar Access When on Scroll(Part-1) | in Tamil
Logic :
First, create two colors of circles one is green and another one is light grey place a light grey circle over the green circle and reduce the outline of the light grey circle depends upon the time specified.

Requirements:
SVG:- Scalar Vector Graphics used to create geometrical shapes like Polygon, Circle ..etc.
Circle tag:- Circle tag is placed inside of the SVG element to create circles in HTML.
CSS animation:- Animation is running in CSS based on the keyframes we are giving.
Stroke Dasharray:- It is used to separate the parts of lines based on the value we are giving.
Stroke Dashoffset:- It is used to give the starting point of the line stroke where to start.

How to do that:
First, open SVG tag width height and width then create a green color circle by using cx, cy, and radius r. cx and a cy are points where the circle going to create and r is a radius of the circle. then create a light grey color circle based on what I said above. put the same cx, cy points light grey circle placed over the green circle. now we have to reduce the outline of the light grey circle green circle will come out. set strokedasharray to place over fully cover with a light grey circle. then now reduce this outline width by using strokedashoffset. and now create keyframes to do that in animation. this will create a circular progress bar.

Now place it wherever you want on your website and enjoy!.

Our Previous videos:

Hash Tags:
#circularprogressbar #progressbarcss #tamil

This tutorial took nearly 3-4 days so please do subscribe guys.
Thanks For Watching.