# Introduction

```tsx
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

| Entry                             | Exports                                                                        |
| --------------------------------- | ------------------------------------------------------------------------------ |
| `solid-route-progress`            | `createProgress`, `<Progress>`, `<ProgressProvider>`, `<Bar>`, `useProgress()`, `createCrossDocumentProgress()`, `IGNORE_ATTRIBUTE` |
| `solid-route-progress/router`     | `<RouteProgress>`, `createRouteProgress()`                                                                                             |
| `solid-route-progress/navigation` | `<NavigationProgress>`, `createNavigationProgress()`                                                                                   |
| `solid-route-progress/style.css`  | the stylesheet                                                                                                                         |

## What JavaScript writes

| Written        | On       | Value                                        |
| -------------- | -------- | -------------------------------------------- |
| `--sp-value`   | the bar  | `0` to `1`, the target of the CSS transition |
| `--sp-speed`   | the bar  | the `speed` option                           |
| `data-state`   | the bar  | `idle \| trickle \| active \| done`          |
| `data-error`   | the bar  | during the done phase of a failed load       |
| `data-sp-busy` | `<html>` | while any bar is visible                     |

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:

| Import                                                      | min  | gzip | brotli |
| ----------------------------------------------------------- | ---- | ---- | ------ |
| `<RouteProgress />`, `solid-route-progress/router`          | 4838 | 2363 | 2135   |
| `<NavigationProgress />`, `solid-route-progress/navigation` | 4300 | 2099 | 1905   |
| `createProgress` alone                                      | 1721 | 908  | 841    |
| `solid-route-progress/style.css`                            | 1089 | 510  | 418    |

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](https://solid-route-progress.vercel.app/docs/installation.md) · [Quick start](https://solid-route-progress.vercel.app/docs/quick-start.md) · [Examples](https://solid-route-progress.vercel.app/docs/examples.md)