nprogress vs react-top-loading-bar
Loading Indicators Comparison
Search packages..
3 Years
nprogressreact-top-loading-barSimilar Packages:
What's Loading Indicators?

Loading indicators are visual cues that inform users about ongoing background processes, such as data fetching or file uploads. They enhance user experience by providing feedback during potentially long operations, helping to manage expectations and reduce uncertainty. nprogress is a lightweight, customizable progress bar for web applications, while react-top-loading-bar is a React-specific component that provides a similar loading bar experience, designed for seamless integration with React applications.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
nprogress1,617,378
26,380-13510 years agoMIT
react-top-loading-bar69,267
74170.3 kB49 months agoMIT
Feature Comparison: nprogress vs react-top-loading-bar

Integration

  • nprogress:

    nprogress can be integrated into any web application, regardless of the framework or library used. It requires minimal setup and can be triggered by JavaScript events, making it versatile for various use cases.

  • react-top-loading-bar:

    react-top-loading-bar is specifically designed for React applications, providing a component-based approach to loading indicators. It integrates easily with React's state and lifecycle, allowing for more dynamic and responsive loading experiences.

Customization

  • nprogress:

    nprogress allows for customization of the progress bar's appearance, including color, height, and animation speed. However, customization is primarily done through CSS, and the library has a fixed structure that limits more extensive changes.

  • react-top-loading-bar:

    react-top-loading-bar offers more flexibility for customization, as it is built as a React component. Developers can easily modify its styles and behavior, and it supports props for dynamic configuration, making it more adaptable to different design requirements.

Framework Dependency

  • nprogress:

    nprogress is framework-agnostic and can be used in any web application, making it a good choice for projects that do not use a specific JavaScript framework.

  • react-top-loading-bar:

    react-top-loading-bar is designed specifically for React applications, so it is not suitable for projects that do not use React.

Ease of Use: Code Examples

  • nprogress:

    nprogress is easy to use with just a few lines of code. Here’s a simple example:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
    <title>NProgress Example</title>
</head>
<body>
    <button onclick="startLoading()">Start Loading</button>
    <script>
        function startLoading() {
            NProgress.start(); // Start the progress bar
            setTimeout(() => {
                NProgress.done(); // Complete the progress bar
            }, 2000); // Simulate a 2-second loading time
        }
    </script>
</body>
</html>
  • react-top-loading-bar:

    react-top-loading-bar is also easy to use in React applications. Here’s a simple example:

    import React, { useRef } from 'react';
import LoadingBar from 'react-top-loading-bar';

const App = () => {
    const loadingBarRef = useRef(null);

    const startLoading = () => {
        loadingBarRef.current.continuousStart(); // Start the loading bar
        setTimeout(() => {
            loadingBarRef.current.complete(); // Complete the loading bar
        }, 2000); // Simulate a 2-second loading time
    };

    return (
        <div>
            <LoadingBar color="#f11946" ref={loadingBarRef} />
            <button onClick={startLoading}>Start Loading</button>
        </div>
    );
};

export default App;
How to Choose: nprogress vs react-top-loading-bar
  • nprogress:

    Choose nprogress if you need a lightweight, framework-agnostic progress bar that can be easily integrated into any web application. It is particularly useful for indicating page load progress or AJAX requests without requiring a specific framework.

  • react-top-loading-bar:

    Choose react-top-loading-bar if you are building a React application and want a progress bar that integrates seamlessly with React's component architecture. It offers a simple API and is designed to work well with React's lifecycle methods.

Similar Npm Packages to nprogress

nprogress is a lightweight JavaScript library that provides a simple way to create a progress bar for web applications. It is commonly used to indicate the loading status of a page or a resource, enhancing the user experience by providing visual feedback during asynchronous operations. With its minimal setup and customizable options, nprogress allows developers to easily integrate a progress indicator into their applications, making it clear to users when content is loading.

While nprogress is a popular choice for adding loading indicators, there are alternatives available, such as:

  • react-top-loading-bar. This library is specifically designed for React applications and provides a customizable loading bar that appears at the top of the screen. It is built on top of the nprogress library but offers a more React-friendly API, making it easier to integrate into React components. With react-top-loading-bar, developers can easily control the loading state and customize the appearance of the loading bar to match their application's design.

To see how nprogress compares with react-top-loading-bar, check out the comparison: Comparing nprogress vs react-top-loading-bar.

Similar Npm Packages to react-top-loading-bar

react-top-loading-bar is a React component that provides a top loading bar to indicate the progress of ongoing tasks, such as data fetching or page transitions. This library is particularly useful for enhancing user experience by visually communicating the loading state of an application. While react-top-loading-bar is a great choice for adding a loading indicator, there are several alternatives available in the React ecosystem. Here are a few noteworthy options:

  • nprogress is a lightweight JavaScript library that provides a slim progress bar at the top of the page. It is commonly used for indicating the progress of AJAX requests and page transitions. nprogress is easy to integrate into any web application, and it can be styled to fit the design of your application. If you are looking for a simple and effective way to show loading progress without the overhead of a full-fledged React component, nprogress is a solid choice.

  • react-loader-spinner is a library that provides a variety of customizable loading spinner components for React applications. Unlike react-top-loading-bar, which focuses on a top loading bar, react-loader-spinner offers a range of spinner styles that can be used to indicate loading states in various parts of your application. If you prefer to use spinners instead of a loading bar or need more visual variety, react-loader-spinner is an excellent alternative.

To see how react-top-loading-bar compares with nprogress and react-loader-spinner, check out the comparison: Comparing nprogress vs react-loader-spinner vs react-top-loading-bar.

README for nprogress

NProgress

Slim progress bars for Ajax'y applications. Inspired by Google, YouTube, and Medium.

Installation

Add nprogress.js and nprogress.css to your project.

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

NProgress is available via bower and npm and spm.

$ bower install --save nprogress
$ npm install --save nprogress

Basic usage

Simply call start() and done() to control the progress bar.

NProgress.start();
NProgress.done();

Using Turbolinks or similar? Ensure you're using Turbolinks 1.3.0+, and use this: (explained here)

$(document).on('page:fetch',   function() { NProgress.start(); });
$(document).on('page:change',  function() { NProgress.done(); });
$(document).on('page:restore', function() { NProgress.remove(); });

Ideas

  • Add progress to your Ajax calls! Bind it to the jQuery ajaxStart and ajaxStop events.

  • Make a fancy loading bar even without Turbolinks/Pjax! Bind it to $(document).ready and $(window).load.

Advanced usage

Percentages: To set a progress percentage, call .set(n), where n is a number between 0..1.

NProgress.set(0.0);     // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0);     // Sorta same as .done()

Incrementing: To increment the progress bar, just use .inc(). This increments it with a random amount. This will never get to 100%: use it for every image load (or similar).

NProgress.inc();

If you want to increment by a specific value, you can pass that as a parameter:

NProgress.inc(0.2);    // This will get the current status value and adds 0.2 until status is 0.994

Force-done: By passing true to done(), it will show the progress bar even if it's not being shown. (The default behavior is that .done() will not do anything if .start() isn't called)

NProgress.done(true);

Get the status value: To get the status value, use .status

Configuration

minimum

Changes the minimum percentage used upon starting. (default: 0.08)

NProgress.configure({ minimum: 0.1 });

template

You can change the markup using template. To keep the progress bar working, keep an element with role='bar' in there. See the default template for reference.

NProgress.configure({
  template: "<div class='....'>...</div>"
});

easing and speed

Adjust animation settings using easing (a CSS easing string) and speed (in ms). (default: ease and 200)

NProgress.configure({ easing: 'ease', speed: 500 });

trickle

Turn off the automatic incrementing behavior by setting this to false. (default: true)

NProgress.configure({ trickle: false });

trickleRate and trickleSpeed

You can adjust the trickleRate (how much to increase per trickle) and trickleSpeed (how often to trickle, in ms).

NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });

showSpinner

Turn off loading spinner by setting it to false. (default: true)

NProgress.configure({ showSpinner: false });

parent

specify this to change the parent container. (default: body)

NProgress.configure({ parent: '#container' });

Customization

Just edit nprogress.css to your liking. Tip: you probably only want to find and replace occurrences of #29d.

The included CSS file is pretty minimal... in fact, feel free to scrap it and make your own!

Resources

Support

Bugs and requests: submit them through the project's issues tracker.
Issues

Questions: ask them at StackOverflow with the tag nprogress.
StackOverflow

Chat: join us at gitter.im.
![Chat](http://img.shields.io/badge/gitter-rstacruz / nprogress-brightgreen.svg)

Thanks

NProgress © 2013-2014, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors.

ricostacruz.com  ·  GitHub @rstacruz  ·  Twitter @rstacruz

Status npm version spm package

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc or npmjs.com, the official website for the npm registry. Please note that npm is a registered trademark of npm, Inc. For more details, please refer to our Terms & Privacy.