Minimalist top loading progress bar for modern browsers.
Inspired by nprogress by rstacruz. The trailing e distinguishes the package name; the API is largely the same.
v1.0 targets evergreen browsers only (Chrome, Firefox, Safari, Edge — last two major versions). IE11 and legacy vendor-prefix fallbacks are not supported.
See CHANGELOG for breaking changes from 0.x.
npm install nprogresseimport NProgressE from 'nprogresse';
import 'nprogresse/style.css';
NProgressE.start();
NProgressE.done(); // success
NProgressE.error(); // error state<link rel="stylesheet" href="https://unpkg.com/nprogresse/dist/style.css" />
<script src="https://unpkg.com/nprogresse/dist/index.js"></script>
<script>
NProgressE.start();
NProgressE.done();
</script>| Method | Description |
|---|---|
start() |
Show the bar and begin trickling |
done(force?) |
Complete successfully and hide |
error(force?) |
Complete with error styling and hide |
set(n) |
Set progress to n (0–1) |
inc(amount?) |
Increment progress |
configure(options) |
Update settings |
remove() |
Remove the bar from the DOM |
Read-only properties: status, el, settings.
NProgressE.configure({
minimum: 0.08, // initial progress (default: 0.08)
easing: 'linear', // CSS easing (default: 'linear')
speed: 200, // animation duration in ms (default: 200)
trickle: true, // auto-increment while active (default: true)
trickleSpeed: 200, // trickle interval in ms (default: 200)
showSpinner: false, // show corner spinner (default: false)
parent: 'body', // container selector (default: 'body')
template: '...', // custom HTML; keep `[role="bar"]`
});done() and error() are no-ops unless the bar was started. Pass true to force:
NProgressE.done(true);
NProgressE.error(true);Override styles via src/style.less or the built dist/style.css.
The default template requires an element with role="bar". See the default template.
npm install
npm test # run tests
npm run build # build dist/
npm run examples # build + serve examples at http://localhost:5173Examples: