How to add Nprogress to sveltekit route change

Add Progress bar when user visit pages
Install nprogress
terminal
npm i nprogress
1. Import Nprogress in +layout.svelte & also nprogress.css to style the bar
+layout.svelte
import NProgress from 'nprogress'; import 'nprogress/nprogress.css';
2. Now import beforeNavigate and afterNavigate
+layout.svelte
import { afterNavigate, beforeNavigate, goto } from '$app/navigation';
3. Create beforeNavigate and afterNavigate functions.
+layout.svelte
beforeNavigate(async () => { NProgress.start(); }); afterNavigate(async () => { NProgress.done(); });
4. If we don’t want the loading circle we can configure Nprogress
+layout.svelte
NProgress.configure({ showSpinner: false });
5. To change style or color, add code to app.postcss
app.postcss
#nprogress .bar { background: rgb(221, 34, 40) !important; height: 2px !important; }