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.

ScrollProgressBar.js

ScrollProgressBar.js

A super lightweight and robust library for displaying how far a user has scrolled on a webpage.

Link

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.

Link

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.

Link

ProgressBar

ProgressBar

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

Link

Scrollpup

Scrollpup

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

Link

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.

Link

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.

Link

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

Link

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.

Link

ProgressJs

ProgressJs

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

Link

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.

Link

React step progress bar

React step progress bar

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

Link

jQuery Circle Progress

jQuery Circle Progress

jQuery Plugin to draw animated circular progress bars.

Link

Ep

Ep

Enhance your HTML5 progress bars with minimal effort!

Link

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.

Link

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.