Progress Bar: Page Two

This link takes you back to the previous page.

This listing shows how the custom loading indicator uses swup and the loading() function offered by loading-indicator.ts.

1
---
2
export interface Props {}
3
---
4

5
<script>
6
  import 'https://unpkg.com/@swup/progress-plugin@3';
7
  import { loading } from './loading-indicator';
8
  //@ts-ignore
9
  const plugin = new SwupProgressPlugin();
10

11
  document.addEventListener('astro:after-swap', () => plugin.progressBar.installStyleElement());
12
  loading(
13
    () => plugin.startShowingProgress(),
14
    () => plugin.stopShowingProgress()
15
  );
16
</script>