10 Best Circular/Radial Progress Bar JavaScript Plugins (2023 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 05 2023
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:
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.
Display Percentage/Progress Values As Gauges - Circle Progress
Yet another circle progress bar plugin to display any numeric values in a responsive, customizable, animated percentage/progress graphs: circles, ring charts, pie charts, etc.
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.
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.
Vanilla JavaScript Circular Progressbar Plugins:
ProgressBar.js
A modern JavaScript library to create animated, smooth, creative progress indicators using SVG.
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.
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.
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.
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.
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.
