How to add Nprogress to sveltekit route change

Add Progress bar when user visit pages

Install nprogress

npm i nprogress

1. Import Nprogress in +layout.svelte & also nprogress.css to style the bar

import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

2. Now import beforeNavigate and afterNavigate

import { afterNavigate, beforeNavigate, goto } from '$app/navigation';

3. Create beforeNavigate and afterNavigate functions.

beforeNavigate(async () => {
		NProgress.start();
	});

afterNavigate(async () => {
		NProgress.done();
	});

4. If we don’t want the loading circle we can configure Nprogress

NProgress.configure({ showSpinner: false });

5. To change style or color, add code to app.postcss

#nprogress .bar {
	background: rgb(221, 34, 40) !important;
	height: 2px !important;
}