Theming

CSS Variables

All visual aspects are controlled via --np-* custom properties. Set them globally or per-instance.

Global Theming

:root {
  --np-color: #6366f1;      /* indigo */
  --np-height: 3px;
  --np-z: 9999;
  --np-peg-width: 80px;
  --np-spinner-size: 20px;
  --np-spinner-top: 12px;
  --np-spinner-right: 12px;
}

/* Dark mode override */
@media (prefers-color-scheme: dark) {
  :root {
    --np-color: #818cf8;
  }
}

Per-Instance (React/Vue)

// React
<ProgressBar color="#f59e0b" height="4px" zIndex={2000} />

// Vue
<ProgressBar :color="#f59e0b" height="4px" :zIndex="2000" />

Vanilla JS

// Global (affects all)
document.documentElement.style.setProperty('--np-color', '#ef4444')

// Per-instance via configure()
const progress = createProgress({})
progress.configure({}) // variables set on :root or parent

Complete Custom CSS (No Default Stylesheet)

NProgress.configure({ autoInjectStyles: false })

/* Your CSS */
#nprogress {
  pointer-events: none;
}
#nprogress .bar {
  background: var(--np-color, #29d);
  position: fixed;
  z-index: var(--np-z, 1031);
  top: 0; left: 0;
  width: 100%;
  height: var(--np-height, 2px);
  transform: translate3d(-100%, 0, 0);
  transition: transform var(--np-speed, 200ms) var(--np-easing, ease);
}
#nprogress .peg {
  display: block; position: absolute; right: 0;
  width: var(--np-peg-width, 100px); height: 100%;
  box-shadow: 0 0 10px var(--np-color), 0 0 5px var(--np-color);
  opacity: 1; transform: rotate(3deg) translate(0, -4px);
}
#nprogress .spinner {
  display: block; position: fixed; z-index: var(--np-z, 1031);
  top: var(--np-spinner-top, 15px); right: var(--np-spinner-right, 15px);
}
#nprogress .spinner-icon {
  width: var(--np-spinner-size, 18px); height: var(--np-spinner-size, 18px);
  border: 2px solid transparent;
  border-top-color: var(--np-color); border-left-color: var(--np-color);
  border-radius: 50%;
  animation: np-spin 400ms linear infinite;
}
@keyframes np-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  #nprogress .bar { transition: none; }
  #nprogress .spinner-icon { animation: none; opacity: 0.5; }
}

Theme Presets

Reduced Motion Fallback

The default stylesheet includes a prefers-reduced-motion block that stops the spinner and disables transitions. The spinner becomes a dimmed ring (not a broken arc).