Progress bars, modernized.

A drop-in replacement for NProgress — same API, now TypeScript-first, dependency-free and multi-framework. React and Vue adapters included.

📦 ≈ 3 KB gzipped ⚡ Zero dependencies 🎯 TypeScript ♿ Accessible 🌙 Reduced motion 🔧 SSR-safe

Try the live progress bar

These controls run the actual nprogress-next core. The blue bar at the top is live, and internal documentation links also trigger it.

Current status idle

terminal

npm install nprogress-next

app.js

import NProgress from 'nprogress-next'

NProgress.start()
// ...some async work...
NProgress.done()

start, done, set, inc, configure, remove. Drop-in for NProgress 0.2.0.

Core is ≈ 3 KB gzipped, budget-gated in CI. Nothing else to install.

Written in TypeScript and shipped with first-class types.

Bundlers, Node, browsers and CDN. SSR-safe on Next.js, Nuxt and Astro.

React and Vue adapters: <ProgressBar /> and useProgress().

role="progressbar", live aria-valuenow and prefers-reduced-motion.

Package	Description
`nprogress-next`	Core engine, framework-agnostic
`nprogress-next-react`	React adapter (<ProgressBar />, `useProgress()`)
`nprogress-next-vue`	Vue adapter (<ProgressBar />, `useProgress()`, plugin)

Install nprogress-next for your framework.

Complete API reference for nprogress-next core.

React components and hooks for nprogress-next.

Vue 3 components, composable, and plugin for nprogress-next.

Using nprogress-next without a framework.

Using nprogress-next with Astro.

Drop-in replacement guide from NProgress to nprogress-next.

Accessibility features in nprogress-next.

Customize nprogress-next appearance with CSS variables.