How to add Nprogress to sveltekit route change

Install nprogress

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;
   }