Route progress for SolidJS

Progress, drawn in CSS.

The loading drift is one long CSS transition. No JavaScript steps the bar forward, and any stylesheet can theme it.

$ npm i solid-route-progress

LP·117: Cubic Bézier Blues

The Curves · 2026 · 12" 180g · gatefold sleeve

Eight tracks that start fast out of the gate, then settle into a long, patient crawl. Never quite arrives, on purpose.

--sp-color

--sp-height3px

speed200ms

--sp-trickle-duration10s

app.tsx

import { Router } from '@solidjs/router'
import { Suspense } from 'solid-js'
import { ProgressProvider } from 'solid-route-progress'
import { RouteProgress } from 'solid-route-progress/router'
import 'solid-route-progress/style.css'

<Router
  root={(props) => (
    <ProgressProvider>
      <RouteProgress />
      <Suspense>{props.children}</Suspense>
    </ProgressProvider>
  )}
>
  {/* routes */}
</Router>