10 Best Circular/Radial Progress Bar JavaScript Plugins 2020

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 04 2020

See also:

Table of contents:

Best jQuery Circular Progressbar Plugins:

Animated Circular Progress Bar with jQuery and Canvas - Circle Progress

Circle Progress is a jQuery plugin that makes use of canvas element to draw an animated circular gradient progress bar in your web page/app.

Animated Circular Progress Bar with jQuery and Canvas - Circle Progress

[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]


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]


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.

Display Percentage/Progress Values As Gauges - Circle Progress

[Demo] [Download]


Dynamic Pie Chart-style Progress Bar with jQuery and SVG - progresspieSVG

progresspieSVG is a simple yet robust jQuery plugin which renders pie or ring chart style progress bars or countdown timers using SVG element.

Dynamic Pie Chart-style Progress Bar with jQuery and SVG - progresspieSVG

[Demo] [Download]


Vanilla JavaScript Circular Progressbar Plugins:

Radial Progress Bar With JavaScript And HTML5 Canvas

A lightweight and zero-dependence JavaScript library used for rendering a radial & circular progress bar on an HTML5 canvas element to present the percentage value you specify.

Radial Progress Bar With JavaScript And HTML5 Canvas

[Demo] [Download]


Animated Radial Progress Bar In JavaScript – ToxProgress.js

ToxProgress.js is a lightweight JavaScript library which makes use of plain HTML/CSS to create animated circular (radial) progress bars with several useful customization options.

Animated Radial Progress Bar In JavaScript – ToxProgress.js

[Demo] [Download]


CSS Only Circular Progressbars:

Pure CSS Circular Percentage Bar

A pure CSS progress bar that shows progress bar with percentage in a circular bar view.

Pure CSS Circular Percentage Bar

[Demo] [Download]


Animated Circular Progress Bar Using SVG Path Animation

ToxProgress.js is a lightweight JavaScript library which makes use of plain HTML/CSS to create animated circular (radial) progress bars with several useful customization options.

Animated Circular Progress Bar Using SVG Path Animation

[Demo] [Download]


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]