15 Javascript Progress Bar & Indicator Plugins

Progress bars let people to see how much of the process they`ve finished, and how much they still need to complete. They can be used to depict the status of anything that is in progress. So here are 15 Javascript Progress Bar & Indicator Plugins that will help you to display the progress of a task easily with a couple of files and lines of code.

Pace

Pace

Include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and ajax navigation.

Download

NProgress.js

NProgress.js

This is a jQuery plugin that shows an interactive progress bar on the top of your page, inspired by the one on YouTube.

Download

ProgressBar

ProgressBar

Responsive and slick progress bars with animated SVG paths. Use built-in shapes or create your own paths.

Download

Line Progress Bar

Line Progress Bar

Whether you want to visualize the duration till a certain date, show upload progress or donation totals, Line has got your use case covered.

Download

Scrollpup

Scrollpup

Minimal beautiful bar to show scroll progress. Pure Javascript Plugin.

Download

Royal Preloader

Royal Preloader

With this plugin you get a beautiful loading progress indicator for your page load. All the assets are automatically detected and loaded. No need to hook into any of your code, progress is detected automatically. Super easy to install. All web browsers and mobile devices supported.

Download

jQuery Goal Thermometer

jQuery Goal Thermometer

This jQuery fundraising thermometer is perfect any sort of goal, whether it be sales, donations, fundraising, or even personal progress. It works perfectly on standard or high-resolution retina screens. Just add a few lines to your HTML and you`re ready to go. The download also comes with a layered PSD of the thermometer.

Download

ForMeter

ForMeter

Bring your forms to life by adding a beautiful progress bar to your contact form, CV, feedback or any other HTML form. Inform your users about the amount of data entered or if you`d like, prevent them to submit the form if the defined percentage has not been reached

Download

Nanobar

Nanobar

Very similar to NProgress, but with the added benefit of a random increment function that allows you to show progress without knowing the specific position.

Download

ProgressJs

ProgressJs

This is a JavaScript and CSS3 library which help developers to create and manage progress bar for every objects on the page.

Download

Material Progress

Material Progress

It creates progress linear bar from Google Material Design. By using CSS3 and pure js which don’t depend on any other libraries.

Download

React step progress bar

React step progress bar

A library to create stunning progress bars and steps in React.

Download

jQuery Circle Progress

jQuery Circle Progress

jQuery Plugin to draw animated circular progress bars.

Download

Ep

Ep

Enhance your HTML5 progress bars with minimal effort!

Download

scrollProgress

scrollProgress

Small library that creates a progress bar that indicates how much you’ve scrolled on a website. It’s very useful to show the reading progress in an article or a blog post.

Download

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.