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
| 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.
Size
| Module | min | gzip | brotli |
|---|---|---|---|
solid-route-progress | 4676 | 2143 | 1949 |
createProgress alone | 1589 | 823 | 762 |
solid-route-progress/router | 1025 | 610 | 524 |
solid-route-progress/navigation | 933 | 503 | 425 |
solid-route-progress/style.css | 1167 | 531 | 437 |
Zero dependencies.