How to add Nprogress to sveltekit route change

How to add Nprogress to sveltekit route change

Add Progress bar when user visit pages

Nprogress
sveltekit

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