SolidJS Route Progress Bar with CSS Trickling

solid-route-progress is a SolidJS and SolidStart route progress library that creates a thin top loading bar to route transitions and tracked async work.

<RouteProgress /> follows useIsRouting(), skips navigations that finish inside the default 200 ms delay, and moves toward completion through one CSS transition.

Features

• One <RouteProgress /> integration for <A> clicks, navigate(), back/forward, action redirects, and route <Suspense> waits.
• 200 ms default delay. Quicker navigations draw nothing.
• CSS trickling toward 95%, with timing, easing, color, height, and stacking order exposed through options and CSS variables.
• Shared holds for route changes, tracked promises, and manual start() calls.
• Cross-document tracking for page-started external links, form posts, location changes, and reload() where the Navigation API is present.
• Tailwind v4-friendly cascade-layer CSS plus state and busy hooks.
• Server-rendered progress markup with role="progressbar", RTL behavior, and forced-colors styling.

How To Use It

Install the package:

npm i solid-route-progress

Import the stylesheet once:

/* src/app.css */
@import 'tailwindcss'; /* optional */
@import 'solid-route-progress/style.css';

Basic SolidStart Usage

Render <RouteProgress /> inside <Router>:

// src/app.tsx
import { Router } from '@solidjs/router'
import { FileRoutes } from '@solidjs/start/router'
import { Suspense } from 'solid-js'
import { RouteProgress } from 'solid-route-progress/router'
import './app.css'
export default function App() {
  return (
    <Router
      root={(props) => (
        <>
          <RouteProgress />
          <Suspense>{props.children}</Suspense>
        </>
      )}
    >
      <FileRoutes />
    </Router>
  )
}

RouteProgress Props

When a <ProgressProvider> supplies the controller, set trickleTo, delay, stopDelay, and speed on the provider. Values passed to <RouteProgress /> for those four options are ignored in that setup.

Track Fetches and Other Async Work

Place <ProgressProvider> inside the router root when descendant components need useProgress():

import { Router } from '@solidjs/router'
import { FileRoutes } from '@solidjs/start/router'
import { Suspense, type ParentProps } from 'solid-js'
import { ProgressProvider } from 'solid-route-progress'
import { RouteProgress } from 'solid-route-progress/router'
function Root(props: ParentProps) {
  return (
    <ProgressProvider>
      <RouteProgress />
      <Suspense>{props.children}</Suspense>
    </ProgressProvider>
  )
}
export default function App() {
  return (
    <Router root={Root}>
      <FileRoutes />
    </Router>
  )
}

Track a Fetch

import { useProgress } from 'solid-route-progress'
function SaveButton() {
  const progress = useProgress()
  const saveItems = async () => {
    await progress.track(
      fetch('/api/items', {
        method: 'POST',
        body: JSON.stringify({ status: 'saved' }),
      }),
    )
  }
  return <button onClick={saveItems}>Save items</button>
}

Progress Controller API

Create a standalone controller when a provider or progress component does not own one:

import { createProgress } from 'solid-route-progress'
const progress = createProgress({ delay: 300 })

Styling and Tailwind CSS

:root {
  --sp-color: oklch(0.62 0.19 264);
  --sp-height: 2px;
}

State Hooks

Tailwind Utilities

Tailwind utilities can override the package stylesheet:

<RouteProgress class="h-1 data-[state=done]:opacity-50" />

Ignore or Filter Route Navigation

<RouteProgress
  shallow
  filter={(to) => !to.startsWith('/admin')}
/>
<A href="/settings" data-sp-ignore>
  Settings
</A>

Use It Outside @solidjs/router

Render <NavigationProgress /> for apps that use the browser Navigation API in place of @solidjs/router:

import { NavigationProgress } from 'solid-route-progress/navigation'
import 'solid-route-progress/style.css'
export function Layout(props) {
  return (
    <>
      <NavigationProgress />
      {props.children}
    </>
  )
}

NavigationProgress Options

Runtime API Map

NProgress and BProgress Migration

Alternatives and Related Resources

• Show A Progress Bar When A React Transition Is Running – react-transition-progress
• Modern TypeScript Progress Bar Library – BProgress
• Google Like Slim Progress Bar Plugin – NProgress
• Customizable Top Loading Progress Bar – topbar

FAQs

Q: Why does the bar not appear on fast route changes?
A: The default delay is 200 ms. A navigation that finishes before the delay ends never draws the bar. Set delay={0} while testing if you need to see every route change.

Q: Why does a SolidStart action that only revalidates data show no progress bar?
A: Actions that revalidate without a redirect do not enter the router’s routing state. Read useSubmission(action).pending and take a hold with progress.start() for that action.

Q: What happens when the Navigation API is unavailable?
A: Normal @solidjs/router route tracking continues through useIsRouting(). Cross-document tracking and <NavigationProgress /> stay inactive.