Qwik City Nprogress ⚡️

A simple Qwik City progress bar component using Nprogress.

Installation

yarn add @quasarwork/qwik-city-nprogress

Usage

The component leverages the property isNavigating from @builder.io/qwik-city useLocation() 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

import { QwikCityNprogress } from '@quasarwork/qwik-city-nprogress'

export default component$(() => {
  return (
    <>
      <QwikCityNprogress />
      <main class="py-8">
        <Slot />
      </main>
    </>
  )
})

Configuration

You can use any configuration property from the original Nprogress package (see Nprogress configuration).

Two other properties have been added to make it easier to customize the look of the progress bar.

color

Type: string

Default: undefined

Keeping the property undefined means keeping the original color provided by Nprogress, which is #29d.

height

Type: string

Default: undefined

Keeping the property undefined means keeping the original height provided by Nprogress, which is 2px.

Example configuration

src/routes/layout.tsx

import { QwikCityNprogress } from '@quasarwork/qwik-city-nprogress'

export default component$(() => {
  return (
    <>
      <QwikCityNprogress
        options={{
          color: 'var(--primary-color)',
          height: '4px',
        }}
      />
      <main class="py-8">
        <Slot />
      </main>
    </>
  )
})