Adding Page Progress Bar To SvelteKit

Learn how to set up a youtube like page progress bar using nprogress


Table Of Contents

Basic Setup

Assuming you have a basic sveltekit project setup using npm init [email protected], let’s add a __layout.svelte and about.svelte routes to the project.

<!-- src/routes/__layout.svelte -->

<nav>
  <a href="/">Index</a>
  <a href="/about">About</a>
</nav>

<slot />
<!-- src/routes/about.svelte -->

<h1>About page</h1>

Installing NProgress

npm i -D nprogress

Adding Progress Bar

We will use the $app/stores module for our progress bar. Specifically, the $navigating store.

navigating is a readable store. When navigating starts, its value is { from, to }, where from and to both mirror the page store value. When navigating finishes, its value reverts to null - Official docs.

Update the __layout.svelte like so:

<script>
  import NProgress from 'nprogress'
  import {navigating} from '$app/stores'
  
  // NProgress css
  import 'nprogress/nprogress.css'

  NProgress.configure({
		// Full list: https://github.com/rstacruz/nprogress#configuration
		minimum: 0.16,
	})
  
  $: {
    if ($navigating) {
      NProgress.start();
    }
    if (!$navigating) {
      NProgress.done();
    }
  }
</script>

<nav>
  <a href="/">Index</a>
  <a href="/about">About</a>
</nav>

<slot />

Notice the $: { ... } declaration. It is a reactive declaration is svelte. Every time something in the page changes, the code block runs.

Before testing out your app, navigate to dev tools and set the page to load from a slow connection.

simulate slow network

For some reason your throttling is not working, (I used stackblitz and it wasn’t working for me), add the following to any of your pages.

<script context="module">
  export async function load() {
    await new Promise(resolve => setTimeout(resolve, 2000));
    return {
      props: {
        
      }
    }
  }
</script>

Basically, it creates a 2-second delay in the pages where it is added. Go back to your application and test it out.

Demo

Press

Amal Shaji © 2021.