Introduction to nprogress
nprogress is a popular JavaScript library for adding a slim progress bar at the top of a webpage.
It is widely used in web applications to indicate loading states for various processes, such as data fetching or transitions between views.
Basic Usage
<!-- Include nprogress.css -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" />
<!-- Include nprogress.js -->
<script src="//cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
Starting the Progress Bar
To start the progress bar, simply call:
<script>
NProgress.start();
</script>
Completing the Progress Bar
When the loading is done, call:
<script>
NProgress.done();
</script>
Incrementing the Progress Bar
You can increment the progress bar by a specific amount:
<script>
NProgress.inc();
</script>
Setting the Progress Bar
To set the progress to a specific value (0.0 to 1.0):
<script>
NProgress.set(0.5); // Set progress to 50%
</script>
Configuration Options
You can configure nprogress using the configure method:
<script>
NProgress.configure({ showSpinner: false }); // Turn off loading spinner
</script>
App Example
Here’s an example of using nprogress in a simple web app:
<!-- index.html -->
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" />
</head>
<body>
<button id="loadButton">Load Data</button>
<script src="//cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
<script>
document.getElementById('loadButton').addEventListener('click', function() {
NProgress.start();
// Simulate loading data
setTimeout(function() {
NProgress.done();
}, 2000); // Simulates a 2 second loading time
});
</script>
</body>
</html>
By using nprogress, you can significantly improve user experience by providing visual feedback during asynchronous operations.
Hash: 6d836cb3bcee16723702e7ba14e788771ed5f1416ab47471de6572ad633192ae
