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.
10. Slick Smooth Top Progress Bars – ToProgress.js
ToProgress is a lightweight JavaScript library used to create slim, smooth, CSS3 animated progress bar on the top of your webpage, as you seen on Youtube.
9. Page Scroll Reading Progress Indicator with Progress.js
Progress.js is a small JavaScript library that generates an animated, circular, SVG based progress bar to indicate the reading progress as you scroll down the page.
8. Animated Pie Progress Bar With Pure CSS – Circles.css
A CSS library for generating animated, pie chart-like progress bars using pure HTML, CSS and CSS3 animations.
7. 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.
6. 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.
5. iOS Style Gradient Progress Bar with Pure CSS/CSS3
An animated, gradient, iOS-inspired progress bar made with pure CSS and CSS3.
4. Animated Progress Bar Component With Pure CSS
A CSS only solution that make it easier to render responsive, CSS3 animated, Bootstrap-like progress bars on your webpage.
3. Material Design Inspired Progress Bar with CSS3 and Pure JS – Mprogress.js
Mprogress.js is a JavaScript library to created linear progress indicator that fills from 0% to 100% using CSS3 powered animations. There’re 4 types of linear bar you can use in your project: Determinate, Buffer, Indeterminate and Query Indeterminate & Determinate.
2. Animated Circular Progress Bar Using SVG Path Animation
A pure CSS solution to create slim stylish circular progress bar using SVG Path Animation and CSS3 animations & transforms.
1. Pure CSS Circular Percentage Bar
A pure CSS progress bar that shows progress bar with percentage in a circular bar view.