Qwik NProgress

Qwik component of NProgress for Qwik City.

Installation

Use your preferred package manager, but this snippet uses pnpm:

1pnpm add @iamaeron/qwik-nprogress nprogress

Usage

It is suggested to add the component in your layout file like src/routes/layout.tsx so that the progress bar will show on any route/url changes.

1import { QwikNProgress } from "@iamaeron/qwik-nprogress";
2import { Slot } from "builder.io/qwik";
3
4export default component$(() => {
5  return (
6    <>
7      <QwikNProgress />
8      <Slot />
9    </>
10  );
11});

Customization

<QwikNProgress /> provides an option prop to change your NProgress settings. Additionally, you can tweak the bar's width and height, the spinner's size and thickness, and their color.

Example:

1<QwikNProgress
2  options={{
3    // ... nprogress settings,
4    color: "#ef4444",
5    height: 4,
6    spinner: {
7      size: 20,
8      thickness: 4,
9    },
10  }}
11/>

Options

color

• allows you to change the bar's, and spinner color.
• default - #29d

height

• allows you to change the bar's height.
• default - 2px

spinner.size

• allows you to change the spinner's size (width/height).
• default - 18px

spinner.thickness

• allows you to change the spinner's thickness.
• default - 2px