Introduction

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

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

Entry points

What JavaScript writes

Everything else is CSS.

How it works

1. start() waits delay (200 ms), then flips data-state to trickle and sets --sp-value to trickleTo (0.95). The stylesheet's trickle rule has a 10 s transition on translate whose curve races out and then crawls. It is one transition, and no timer steps it.
2. set(n) switches to active, which leaves the bar on its short --sp-speed transition for the hop, then hands back to trickle. CSS transitions interrupt from the current animated value, so there is nothing to sync.
3. Once the last hold is released (or on done()), the bar hops to 100% in the done state (with data-error if a hold was released as an 'error'; a 'cancel' skips this step and fades straight out), then idle fades the whole bar out with opacity + a delayed visibility: hidden. The bar itself is parked back at --sp-start only after the fade has finished. Both steps take speed, which the bar also writes to --sp-speed, so the CSS and the timers never disagree. A load that starts during this phase waits for the fade and for delay, whichever is longer.
4. If the load ends while delay is still pending, or before the browser painted the bar (tracked with a single requestAnimationFrame), the bar is dropped silently.

Size

What each setup adds to your bundle, in bytes, after tree-shaking:

Zero dependencies. The bar only moves opacity and translate, so its animations run on the compositor thread and stay smooth while the next route keeps the main thread busy.

Next

Installation · Quick start · Examples