10 Best Circular/Radial Progress Bar JavaScript Plugins (2024 Update)
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 Jan 11 2024
See Also:
- 10 Best Progress Bar (Linear) Components In JavaScript & CSS
- 10 Best Progress Bar Components For Vue.js App
- 10 Best JavaScript & CSS Progress Bar Components
Table of contents:
- jQuery Circular Progressbar Plugins
- Vanilla JS Circular Progressbar Libraries
- CSS Only Circular Progressbars
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.
Animated Circular Progress Bar with jQuery and Canvas - Circle Progress
A jQuery plugin that makes use of canvas element to draw an animated circular gradient progress bar in your web page/app.
Circular And Linear Progressbar In JavaScript and SVG - progressBar
A pretty simple progressbar JavaScript plugin that helps you generate animated, circular or linear progress bars using SVG based on raphael.js.
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.
Percentage Loader - jQuery Progress Bar Plugin
The jQuery Circle Bars plugin makes it easier to draw animated, customizable, circular progress bars and/or countdown timers using pure CSS/CSS3.
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.
ProgressBar.js
A modern JavaScript library to create animated, smooth, creative progress indicators using SVG.
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.
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.
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.
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.
