Introduction to nprogress
nprogress is a minimalist progress bar library designed for modern web applications. It allows you to easily add a slim, beautiful progress bar to your site or application. Whether you’re loading a page or handling asynchronous requests, nprogress provides a visual indicator to keep users informed about the progress of their actions.
Getting Started with nprogress
To get started, you’ll need to install the nprogress library. You can do this via npm:
npm install nprogressInclude the CSS and JavaScript files in your project:
<link rel="stylesheet" href="path/to/nprogress.css"/> <script src="path/to/nprogress.js"></script> Basic Usage
NProgress.start(); // Start the progress bar NProgress.done(); // Complete the progress bar Useful APIs
NProgress.configure
Customize the appearance and behavior of the progress bar:
NProgress.configure({
minimum: 0.1,
easing: 'ease',
speed: 500,
showSpinner: true
}); NProgress.set
Set the progress bar status to a specific value (between 0 and 1):
NProgress.set(0.4); // 40% progressNProgress.inc
Increment the progress bar by a random amount:
NProgress.inc();NProgress.configure
Show or hide the spinner within the progress bar:
NProgress.configure({ showSpinner: false }); // Hide spinner App Example Using nprogress
Below is a simple example of how to integrate nprogress into a web application:
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>nprogress Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress/nprogress.css"/>
<script src="https://cdn.jsdelivr.net/npm/nprogress/nprogress.js"></script>
</head>
<body>
<h1>My Application</h1>
<button onclick="loadData()">Load Data</button>
<script>
function loadData() {
NProgress.start();
// Simulate data loading
setTimeout(function() {
NProgress.done();
alert("Data Loaded");
}, 2000);
}
</script>
</body>
</html> In this example, clicking the “Load Data” button will start the progress bar. After a simulated delay of 2 seconds, the progress bar will complete, and a message will appear.
Overall, nprogress is a versatile tool for enhancing user experience by visually indicating progress on the web.
Hash: 6d836cb3bcee16723702e7ba14e788771ed5f1416ab47471de6572ad633192ae
