Indeterminate Circular Progress Bar using Pure CSS

indeterminate progress bar css

This is an indeterminate circle progress bar using pure HTML & CSS. It doesn’t use JavaScript. It uses conic-gradient to create the gradient effect. It also uses animation property to animate the progress bar. Final output: If the video isn’t working, watch it on the YouTube. Helpful links to understand the code: HTML: CSS:

CSS Loading Spinner Example

CSS Loading Spinner Example

This is a loading spinner made with HTML and CSS and animation effects. You can download the source code for free below. The logic is simple. There is a div element with class loading. I set the border-radius to 50%. I added border-top-color and border-bottom-color. The animation is set with transform property. Initially, it is … Read more

Animated Circular Progress Bar using HTML, CSS, & JS

Animated Circular Progress Bar

This is an animated circular progress bar made with HTML, CSS, and JavaScript (JS). It shows the percentage at the center of the circle. The foreground circle is made with SVG. It’s width equals to foreground-circle’s width – background-circle’s border width. The cx, cy, and r values should be half of the svg’s width. You … Read more

Circular Progress Bar with Animation | HTML, CSS, and JavaScript

Circular Progress Bar HTML CSS JS

Here is an animated circular progress bar made with HTML, CSS, and JavaScript. It shows the percentage number at the center.