10 Best Circular/Radial Progress Bar JavaScript Plugins (2022 Update)

by jQueryScript,

This is a collection of 10 best free jQuery, Vanilla JavaScript, and Pure CSS libraries that let you create circular (radial) progress bars to visualize percentage values for progress, statistics, loading state, and much more. Have fun.

Originally Published Sep 03 2019, updated Feb 01 2022

See Also:

Table of contents:

Best jQuery Circular Progressbar Plugins:

Dynamic Circular Progress Bar with jQuery and CSS3

Just another jQuery plugin which uses JavaScript and CSS3 transforms to draw an animated progress (loading) bar representing a given percent value.

Dynamic Circular Progress Bar with jQuery and CSS3

[Demo] [Download]


Animated Radial Progress Bars With jQuery, SVG And CSS3

jQuery, SVG and CSS3 based radial progress bars that automatically activate the progress animation on scroll.

Animated Radial Progress Bars With jQuery, SVG And CSS3

[Demo] [Download]


Circular Progress Bar And Countdown Timer With jQuery - circlebars

The jQuery Circle Bars plugin makes it easier to draw animated, customizable, circular progress bars and/or countdown timers using pure CSS/CSS3.

Circular Progress Bar And Countdown Timer With jQuery - circlebars

[Demo] [Download]


Animated Circle Progress Bar with jQuery and SVG - asPieProgress

asPieProgress is a lightweight jQuery plugin that makes use of SVG to draw an animated pie chart-like circular progress bar with percentage and text label display.

Animated Circle Progress Bar with jQuery and SVG - asPieProgress

[Demo] [Download]


jQuery Plugin For SVG Progress Circle - ProgressCircle

A lightweight jQuery plugin used to render animated, dynamic circular progress indicators using SVG and CSS.

jQuery Plugin For SVG Progress Circle - ProgressCircle

[Demo] [Download]


Vanilla JavaScript Circular Progressbar Plugins:

Create Circular Progress Bars Using JavaScript And SVG

A lightweight JavaScript library to help developers to draw animated, cross-browser, highly customizable progress circles using SVG and plain JavaScript.

Create Circular Progress Bars Using JavaScript And SVG

[Demo] [Download]


ProgressBar.js

A modern JavaScript library to create animated, smooth, creative progress indicators using SVG.

ProgressBar.js

Demo Download


CSS Only Circular Progressbars:

Circular Progress Bar With Plain HTML / CSS

A pure Html and CSS approach to presenting percentage values in partially filled circles just like the ring chart. Powered by CSS3 transform and clip properties.

Circular Progress Bar With Plain HTML / CSS

[Demo] [Download]


Smooth Circle Progress Indicator In SVG And CSS

Yet another pure CSS and SVG solution to create smooth circular progress bars indicating percentages on the web app.

Smooth Circle Progress Indicator In SVG And CSS

[Demo] [Download]


Animated Circular Progress Bar Using SVG Path Animation

A pure CSS solution to create a slim stylish circular progress bar using SVG Path Animation and CSS3 animations & transforms.

Animated Circular Progress Bar Using SVG Path Animation

[Demo] [Download]


More Resources:

Want more jQuery plugins or JavaScript libraries to create awesome progress bars on the web & mobile? Check out the jQuery Progressbar and JavaScript Progressbar sections.