A simple Qwik City progress bar component using NProgress.
npm install @quasarwork/qwik-city-nprogressA simple [Qwik City][qwik-city] progress bar component using [Nprogress][nprogress].
``bash`
yarn add @quasarwork/qwik-city-nprogress
The component leverages the property isNavigating from [@builder.io/qwik-city useLocation()][use-location] hook.
In order to use the component, you just need to add it in a layout component.
_It is recommended to add it to the top-level layout component, so that it will work through the whole site._
src/routes/layout.tsx
`typescript
import { QwikCityNprogress } from '@quasarwork/qwik-city-nprogress'
export default component$(() => {
return (
<>
)
})
`
You can use any configuration property from the original [Nprogress][nprogress] package (see Nprogress configuration).
Two other properties have been added to make it easier to customize the look of the progress bar.
Type: string
Default: undefined
Keeping the property undefined means keeping the original color provided by [Nprogress][nprogress], which is #29d.
Type: string
Default: undefined
Keeping the property undefined means keeping the original height provided by [Nprogress][nprogress], which is 2px.
src/routes/layout.tsx
`typescript
import { QwikCityNprogress } from '@quasarwork/qwik-city-nprogress'
export default component$(() => {
return (
<>
color: 'var(--primary-color)',
height: '4px',
}}
/>
)
})
``
[qwik-city]: https://qwik.builder.io/
[nprogress]: https://ricostacruz.com/nprogress/
[use-location]: https://qwik.builder.io/docs/api/#uselocation