Top 10 JavaScript & CSS Progress Bar Components Of 2018

Here is a constantly updated list of the 10 BEST FREE JavaScript and CSS based progress bar components we published on CSSScript.com. I hope you like it and don’t forget to spread the world.

Originally Published Nov 14 2017, updated Dec 06 2018

1. Circular Progress Bar With Plain HTML / CSS

Circular Progress Bar With Plain HTML CSS

Demo Download

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.


2. Animated Pie Progress Bar With Pure CSS – Circles.css

circles-css

Demo Download

A CSS library for generating animated, pie chart-like progress bars using pure HTML, CSS and CSS3 animations.


3. Circular Progress Bar Component With JavaScript – progress-bars.js

Circular Progress Bar Component With JavaScript – progress-bars.js

Demo Download

progress-bars.js is a X-Tag powered web component used for creating animated, customizable, circular progress bar to indicate the loading status.


4. Lightweight Slim Javascript Progress Bar – nanobar

Lightweight Slim Javascript Progress Bar – nanobar

Demo Download

A super lightweight progress bar built on top of javascript and CSS3 transitions to create a slim indicator for content loading status.


5. Animated Radial Progress Bar In JavaScript – ToxProgress.js

Animated Radial Progress Bar In JavaScript – ToxProgress.js

Demo Download

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.


6. Slim AJAX Loading Indicator Library – microbar

Slim AJAX Loading Indicator Library – microbar

Demo Download

microbar is a very small and easy to use JavaScript library for generating a top slim progress bar to indicate the ajax loading status as you seen on Youtube and Github.


7. JavaScript Only Progress Bar Component

JavaScript Only Progress Bar Component

Demo Download

A lightweight, dependency- and CSS-free JavaScript library used for generating animated, customizable progress bars.


8. Minimal Horizontal & Circular Progress Bar Library – ProgressBar.js

Minimal Horizontal & Circular Progress Bar Library – ProgressBar.js

Demo Download

This is a tiny JavaScript library for creating circular and/or top horizontal progress bars animated with the tween.js library.


9. Simple Customizable Progressbar In Vanilla JavaScript – easyBar

Simple Customizable Progressbar In Vanilla JavaScript – easyBar

Demo Download

easyBar is a small, easy, yet highly customizable progress bar component written in vanilla JavaScript.


10. Fancy Progress Bars With SVG Patterns – Bars

Fancy Progress Bars With SVG Patterns – Bars

Demo Download

The Bars library lets you create fancy progress bars filled with SVG patterns when processing.