explaingit

rstacruz/nprogress

26,410JavaScriptAudience · vibe coderComplexity · 1/5DormantLicenseSetup · easy

TLDR

A tiny JavaScript library that shows a slim loading bar at the top of the page as content loads, giving users visual feedback that something is happening.

Mindmap

mindmap
  root((repo))
    What it does
      Top progress bar
      Visual feedback
      Reduces frozen feeling
    How to use
      Install with npm
      Call start function
      Call complete function
    Customization
      Change color easily
      Minimal CSS
      Lightweight design
    Use cases
      Data fetching
      Page navigation
      Async operations
    Tech stack
      JavaScript
      CSS
      Browser APIs

Things people build with this

USE CASE 1

Add a loading bar to a web app that fetches data from an API to show users progress.

USE CASE 2

Display visual feedback during page navigation or route changes in a single-page app.

USE CASE 3

Customize the progress bar color to match your site's branding with a single CSS value change.

Tech stack

JavaScriptCSS

Getting it running

Difficulty · easy Time to first run · 5min
Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

NProgress is a tiny JavaScript library that adds the thin loading bar you see at the top of pages on YouTube and Medium, that slim colored line that slides across the top of the browser and fills in as a page loads. It's a small visual cue that tells users something is happening, which reduces the feeling of a page being "frozen" or unresponsive. For a vibe coder building a web app with tools like Lovable or Bolt, or anyone adding polish to a website, NProgress is one of the easiest UI improvements you can add. You install it with one command, then call two functions in your code: one to start the bar when a request begins, and one to complete it when the request finishes. The whole library is minimal by design, the CSS file is tiny and easy to customize by changing a single color value. It works great for any situation where your app fetches data or navigates between pages, giving users visual feedback without a jarring full-page spinner. It's particularly popular with older web frameworks, but it works with any JavaScript project. The library is well-established and used across thousands of production websites, it's the kind of small, focused tool that just does one thing reliably. Adding it to a project built on Cursor or Replit is straightforward even without deep coding knowledge, as the integration typically takes just a few lines.

Copy-paste prompts

Prompt 1
Show me how to add NProgress to a web app and wire it up to show when API requests start and finish.
Prompt 2
How do I customize the NProgress bar color and styling to match my website's design?
Prompt 3
I'm building a site with Lovable, walk me through adding NProgress so the loading bar appears during page transitions.
Prompt 4
What's the simplest way to integrate NProgress into a vanilla JavaScript project without a build tool?
Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.