explaingit

rstacruz/nprogress

Analysis updated 2026-06-21

26,411JavaScriptAudience · vibe coderComplexity · 1/5LicenseSetup · easy

TLDR

A tiny JavaScript library that adds a slim loading bar at the top of your web page, the same style you see on YouTube, to show users something is happening during page loads or data fetches.

Mindmap

mindmap
  root((NProgress))
    What it does
      Top loading bar
      Visual feedback
      Slim colored line
    How to use
      NProgress.start
      NProgress.done
      CSS customization
    Use cases
      Page navigation
      Data fetching
      API calls
    Audience
      Web developers
      Vibe coders
      Frontend builders
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Add a YouTube-style loading bar to your web app to reassure users during slow data fetches.

USE CASE 2

Give visual feedback during page navigation in a single-page app without a full-page spinner.

USE CASE 3

Customize the loading bar color to match your brand by changing a single CSS value.

USE CASE 4

Integrate into any JavaScript project with just two function calls, start and done.

What is it built with?

JavaScriptCSS

How does it compare?

rstacruz/nprogressphilc/vimiumrollup/rollup
Stars26,41126,46726,273
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasyeasymoderate
Complexity1/51/53/5
Audiencevibe coderdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get 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 React app so the loading bar appears whenever a React Router page navigation starts and disappears when the new page finishes loading.
Prompt 2
I'm using fetch() to load data in my Bolt-built app. Show me exactly where to call NProgress.start() and NProgress.done() around my fetch call, with error handling.
Prompt 3
How do I change the NProgress bar color to match my brand's hex color #FF5733? Show me the minimal CSS override needed.
Prompt 4
I want NProgress to also show a spinner instead of just the bar. Show me the configuration option to enable it and where to add it.
Prompt 5
Give me a complete minimal HTML + JS example that shows NProgress working with a simulated 2-second delay, no build tools, just script tags.

Frequently asked questions

What is nprogress?

A tiny JavaScript library that adds a slim loading bar at the top of your web page, the same style you see on YouTube, to show users something is happening during page loads or data fetches.

What language is nprogress written in?

Mainly JavaScript. The stack also includes JavaScript, CSS.

What license does nprogress use?

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

How hard is nprogress to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is nprogress for?

Mainly vibe coder.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Scan in gitsafehub Deploy in gitdeployhub rstacruz on gitmyhub

Verify against the repo before relying on details.