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