NProgress

NProgress is a small vanilla-JavaScript library that renders a slim, YouTube/Medium-style progress bar at the top of the page to give users visual feedback during page transitions or Ajax requests. It exposes a tiny imperative API (start(), done(), set(), inc()) that lets any framework or routing library drive the bar’s progress without needing a build step or dependency on a specific UI framework.

The library ships as a single JS file plus a companion CSS file, is configurable (easing, speed, minimum starting percentage, spinner visibility, trickle behavior, parent container), and integrates easily with Turbolinks, Pjax, or custom Ajax event hooks. It has been a long-standing default choice for adding a subtle loading indicator to server-rendered and SPA-style web applications alike.

What You Get

• A simple imperative API — start(), done(), set(n), inc() — to drive a top-of-page progress bar
• A companion CSS file defining the bar’s appearance, easily customized by editing a handful of styles
• Configurable behavior: minimum starting percentage, easing curve, animation speed, trickle auto-increment, spinner visibility, and parent container
• Framework-agnostic design that hooks into Turbolinks, Pjax, or custom Ajax start/stop events
• Zero dependencies and a tiny footprint suitable for both legacy multi-page apps and modern SPAs

Common Use Cases

• Showing a loading indicator during client-side route transitions in a single-page application
• Providing visual feedback while an Ajax request or form submission is in progress
• Wiring into Turbolinks or Pjax navigation events for classic server-rendered Rails/Django-style apps
• Adding a lightweight, dependency-free loading affordance without pulling in a full UI component library

Under The Hood

Architecture - NProgress is intentionally minimal: a single ~500-line nprogress.js file exposes a module-style singleton (NProgress) that manages internal status state and DOM manipulation directly, injecting and animating a bar element (and optional spinner) matched against a role='bar' template string, with no virtual DOM or framework dependency. Tech Stack - Plain vanilla JavaScript with a UMD-style wrapper for compatibility across CommonJS, AMD, and global-script usage; distributed via npm, Bower, and CDNs (unpkg, jsDelivr); a companion nprogress.css file handles all visual styling and transitions via CSS. Code Quality - The codebase is small and readable, with a test/test.js suite covering the core start/done/set/inc behaviors; being feature-frozen since its last release (2020) the code has had years to stabilize, though it predates modern build tooling and ships largely as-is. API Design - The API is deliberately tiny and memorable (start, done, set, inc, configure), requiring almost no boilerplate to integrate — a large part of its long-running popularity — though its imperative, singleton-based design contrasts with declarative component patterns used in modern frameworks.