Quick start

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

const Layout = (props) => (
  <>
    <RouteProgress />
    <Suspense>{props.children}</Suspense>
  </>
)

<Router root={Layout}>
  <Route path="/" component={Home} />
</Router>

// src/app.tsx
import { Router } from '@solidjs/router'
import { FileRoutes } from '@solidjs/start/router'
import { Suspense } from 'solid-js'
import { RouteProgress } from 'solid-route-progress/router'
import './app.css'

export default function App() {
  return (
    <Router
      root={(props) => (
        <>
          <RouteProgress />
          <Suspense>{props.children}</Suspense>
        </>
      )}
    >
      <FileRoutes />
    </Router>
  )
}

import { NavigationProgress } from 'solid-route-progress/navigation'

;<NavigationProgress />

import { ProgressProvider, useProgress } from 'solid-route-progress'

<ProgressProvider>
  <RouteProgress />
  {children}
</ProgressProvider>

const progress = useProgress()

await progress.track(fetch('/api/items'))

const release = progress.start()
progress.set(0.6)
release() // release('error') · release('cancel')