Add NProgress to Svelte Kit project

add-nprogress-to-svelte-kit-project.md

Step

1. Install nprogress:

npm i nprogress

2. Put the below code in the src/routes/__layout.svelte (or something else).

<script>
	import 'nprogress/nprogress.css'
	import nprogress from 'nprogress'
	import { onMount } from 'svelte'

	onMount(() => {
		const onNavigationStart = () => {
			nprogress.start()
		}

		const onNavigationEnd = () => {
			nprogress.done()
		}

		window.addEventListener('sveltekit:navigation-start', onNavigationStart)
		window.addEventListener('sveltekit:navigation-end', onNavigationEnd)

		return () => {
			window.removeEventListener('sveltekit:navigation-start', onNavigationStart)
			window.removeEventListener('sveltekit:navigation-end', onNavigationEnd)
		}
	})
</script>

<slot />

3. Done.

When you navigate to another page, you will see a blue bar at the top of the page.