1  <script lang="ts">
 2    import { isLoading } from "@app/lib/router";
 3  </script>
 4  
 5  <style>
 6    .loading-bar {
 7      height: 0.125rem;
 8      background-color: var(--color-fill-secondary);
 9      width: 0%;
10      opacity: 0;
11      position: fixed;
12      z-index: 10;
13      transition: width 2s ease;
14    }
15  
16    .visible {
17      opacity: 1;
18      width: 100%;
19    }
20  </style>
21  
22  <div
23    role="progressbar"
24    aria-label="Page loading"
25    class="loading-bar"
26    class:visible={$isLoading}>
27  </div>