Colorful styled progress bar: Page Two

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

8
<MdxLayout {...Astro.props}>
9
  <ProgressBar />
10
  {/* Adding transition:name defines a transition group for the morph effect */}
11
  <div transition:name="main">
12
    <slot />
13
  </div>
14
</MdxLayout>
15

16
<style is:global>
17
  main a { ... }
18
  @keyframes shift { ... }
19
  @keyframes cycle { ... }
20

21
  .swup-progress-bar { ... }
22
  .swup-progress-bar::before { ... }
23
  .swup-progress-bar::after { ... }
24

25
  html.loading main {
26
    position: absolute;
27
    animation: shift 1s linear both;
28
  }
29
  html.loading header,
30
  html.loading footer {
31
    display: none;
32
  }
33
  html.loading a {
34
    opacity: 0;
35
    transition: opacity 0.3s linear;
36
  }
37
</style>