sveltekit-top-loader

A SvelteKit top loading bar component made using nprogress.

Demo

Note: you might have to throttle the network speed to see the top loader 😅

https://sveltekit-top-loader.pages.dev/

Installation

Using npm:

``sh
npm install sveltekit-top-loader
`

Usage

In your root +layout.svelte file, import the component and render it at the top.

`svelte



`

props

$3

Color for the top loader.

- Type: string
- Default: #29d

$3

The initial position for the top loader in percentage, 0.08 is 8%.

- Type: number
- Default: 0.08

$3

The increment delay speed in milliseconds.

- Type: number
- Default: 200

$3

The height for the top loader in pixel.

- Type: number
- Default: 3

$3

Auto increamenting behaviour for the top loader.

- Type: boolean
- Default: true

$3

To show spinner or not.

- Type: boolean
- Default: true

$3

Animation settings using easing (a CSS easing string).

- Type: string
- Default: ease

$3

Animation speed in ms for the top loader.

- Type: number
- Default: 200

$3

Shadow for the top loader. You can disable it by setting it to false.

- Type: string | false
- Default: 0 0 10px ${color},0 0 5px ${color}

$3

Template for the top loader.

- Type: string
- Default:

$3

z-index for the top loader.

- Type: number
- Default: 1600`

Credits

This library is a port of Next.js top loader. A huge thanks to the creators and contributors of nextjs-toploader and nprogress.