Progress Bar: Page One

Go to page two

This page shows a custom progress bar based on an idea by @kb↗. It utilizes the swup progress bar plugin↗. Click on the link to page two a above this section to see it in action.

Install the 👜 Bag of Tricks ✨ in your astro project with npm install astro-vtbot or install as an Astro integration!. Then use the <ProgressBar> like this:

1
---
2
import BrakePad from 'astro-vtbot/components/BrakePad.astro';
3
import ProgressBar from 'astro-vtbot/components/ProgressBar.astro';
4
import MdxLayout from './MdxLayout.astro';
5
---
6

7
<MdxLayout {...Astro.props}>
8
  {
9
    /* This is the custom component.
10
     * It can be put into the <head> or the <body> of your page
11
     */
12
  }
13
  <ProgressBar />
14

15
  {/* To observe the effect in DEV mode it is necessary to simulate 2000ms loading time */}
16
  <BrakePad duration={2000} />
17

18
  <slot />
19
</MdxLayout>
20

21
{/* You can style the progress bar by defining the swup-progress-bar class */}
22
<style is:global>
23
  .swup-progress-bar {
24
    background-color: rgb(64, 128, 192);
25
  }
26
</style>

The <BrakePad /> component shown in the listing above is optional. It helps you to see the progress bar even if you have a fast server and a fast connection: It simulates long loading times for DEV mode. <BrakePad /> does nothing when you build for production.

As an alternative you could also throttle the connection speed using the browser’s dev tools.