SvelteKit Navigation Progress Bar

A simple progressbar for sveltekit to show the progress of navigation. It uses the navigating state from sveltekit to track the navigation progress and shows a progress bar at the top of the page.

Demo

Installation

npm

npm install sveltekit-navigation-progressbar

pnpm

pnpm add sveltekit-navigation-progressbar

yarn

yarn add sveltekit-navigation-progressbar

bun

bun add sveltekit-navigation-progressbar

Usage

src/routes/+layout.svelte

<script lang="ts">
  import { NavigationProgress } from 'sveltekit-navigation-progressbar';
</script>

<!-- accept any css color value (hex, rgb, rgba, hsl, hsla, named colors etc...) or a css variable pointing to a valid color -->
<NavigationProgress fillColor={'blue'} trackColor={'transparent'} />

Styling

Colors

fillColor: The color of the progress bar. Default is red.
trackColor: The color of the track (the background of the progress bar). Default is transparent.

Css Styling

You can change everything about the progress bar by targeting the progress[data-navigation-progress] attribute in your css. For example:

progress[data-navigation-progress] {
    top: 150px; // change the top
}

This gives you full control over the styling og the progress bar, expect for the colors which are controlled by the fillColor and trackColor props.

If you want to see the default styles, you can check the NavigationProgress.css file.

This package was created as part of this article Improving page navigation UX in SvelteKit with a progress bar

License

MIT License