# Installation

```sh
npm i solid-route-progress
# or
pnpm add solid-route-progress
# or
yarn add solid-route-progress
# or
bun add solid-route-progress
```

| Peer              | Version                                        |
| ----------------- | ---------------------------------------------- |
| `solid-js`        | 1.9 or a later 1.x                             |
| `@solidjs/router` | 0.15 or 1.x, for `solid-route-progress/router` |

Solid 2 is not supported yet.

## Stylesheet

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

```ts
import 'solid-route-progress/style.css'
```

## Browsers

The bar draws in Chrome and Edge 111, Firefox 113 and Safari 15.4 or later (`@layer`, plus `oklch()` for the default color).

| Feature                                                     | Chrome / Edge | Firefox | Safari | Without it                                    |
| ----------------------------------------------------------- | ------------- | ------- | ------ | --------------------------------------------- |
| `linear()` trickle curve                                    | 113           | 112     | 17.2   | the drift eases with `ease` instead           |
| `@property`, for `--sp-value` on your own elements          | 85            | 128     | 16.4   | those elements jump; the bar is unaffected    |
| `:dir()`, for right-to-left pages                           | 120           | 49      | 16.4   | the bar fills from the left under `dir="rtl"` |
| Navigation API, for cross-document and `NavigationProgress` | 102           | 147     | 26.2   | those navigations are not tracked             |

## Builds

| Export condition | Build                                                                   |
| ---------------- | ----------------------------------------------------------------------- |
| `solid`          | JSX untouched; SolidStart and `vite-plugin-solid` compile it themselves |
| default          | DOM-compiled, no server rendering                                       |
| `development`    | dev warnings; production resolves it to `false` and drops them          |