Introduction to nprogress

nprogress is a simple, lightweight JavaScript library that provides a progress bar at the top of the page. It’s useful for enhancing the user experience by indicating loading progress, making web applications feel more responsive and engaging.

Getting Started

First, you’ll need to install nprogress. You can do this using npm:

npm install nprogress

Then, import nprogress in your JavaScript file:

import NProgress from 'nprogress';

To use the default styles, you also need to include the CSS file:

import 'nprogress/nprogress.css';

Basic Usage

Start the progress bar using NProgress.start():

NProgress.start();

End the progress bar using NProgress.done():

NProgress.done();

Configuration Options

• Configure the min percentage:

NProgress.configure({ minimum: 0.1 });

• Set custom speed:

NProgress.configure({ speed: 500 });

• Disable spinner:

NProgress.configure({ showSpinner: false });

Advanced Methods

• Increment progress manually:

NProgress.inc();

• Set a specific percentage:

NProgress.set(0.5);

• Trigger progress bar when an AJAX request starts and ends:

    $(document).on('ajaxStart', NProgress.start);
    $(document).on('ajaxStop', NProgress.done);
  

• Remove the progress bar completely:

NProgress.remove();

App Example with nprogress

Here’s a simple example of a web application that uses nprogress to indicate loading states:

  import React, { useEffect } from 'react';
  import NProgress from 'nprogress';
  import 'nprogress/nprogress.css';
  
  const App = () => {
    useEffect(() => {
      NProgress.start();
      // Simulate a network request
      setTimeout(() => {
        NProgress.done();
      }, 2000);
    }, []);
  
    return (
      

        
Welcome to My App
        
The content will appear after the progress bar is complete.
      
    );
  };
  
  export default App;

Conclusion

nprogress is a powerful tool to provide visual feedback to users during page loads and other asynchronous actions. Its ease of use and configuration options make it a great choice for enhancing user experience.

If you want to learn more, visit the official nprogress GitHub repository.

Hash: 6d836cb3bcee16723702e7ba14e788771ed5f1416ab47471de6572ad633192ae