NProgress: A Lightweight Progress Bar Plugin for Your Web Applications
NProgress is a minimalistic progress bar library that allows you to integrate slim progress bars into your applications seamlessly. It’s easy to configure and comes packed with a plethora of useful APIs.
Getting Started
To get started with NProgress, you need to include the following CSS and JavaScript files in your project:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
Basic Usage
Starting and stopping NProgress is as simple as calling two functions:
// Start the progress bar
NProgress.start();
// Complete the progress bar
NProgress.done();
Advanced Features
Incrementing
NProgress can automatically increment, simulating movement to keep users engaged.
NProgress.inc();
Setting a Specific Value
You can set the progress bar to a specific value (between 0.0 and 1.0):
NProgress.set(0.5); // Sets progress bar to 50%
Configure Options
NProgress comes with several configuration options such as changing the minimum percentage, easing, speed, and much more:
NProgress.configure({ minimum: 0.1 });
NProgress.configure({ easing: 'ease', speed: 500 });
Showing or Hiding the Spinner
You can control the visibility of the spinner:
NProgress.configure({ showSpinner: false });
Application Example
Here’s a simple application example that demonstrates the use of NProgress APIs:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
</head>
<body>
<button onclick="startProgress()">Start</button>
<button onclick="stopProgress()">Stop</button>
<script>
function startProgress() {
NProgress.start();
setTimeout(() => NProgress.done(), 2000); // Automatically completes the progress bar in 2 seconds
}
function stopProgress() {
NProgress.done();
}
</script>
</body>
</html>
NProgress is an excellent lightweight library for adding progress indicators to your applications, ensuring a better user experience.
Hash: 6d836cb3bcee16723702e7ba14e788771ed5f1416ab47471de6572ad633192ae
