feat: add LoadingBar component with known and unknown states

src/components/LoadingBar/_loadingBar.scss

@@ -0,0 +1,37 @@
+@use '../../styles/tokens/typography' as *;
+
+.loading-bar {
+  position: relative;
+  width: 100%;
+  height: 6px;
+  background-color: var(--nds-text);
+  overflow: hidden;
+  border-radius: var(--nds-radius-sm);
+
+  &__progress {
+    height: 100%;
+    background-color: var(--nds-primary);
+    transition: width 0.3s ease;
+    border-radius: var(--nds-radius-sm);
+  }
+
+  &__unknown {
+    position: absolute;
+    top: 0;
+    left: -50%;
+    width: 50%;
+    height: 100%;
+    background-color: var(--nds-primary);
+    border-radius: var(--nds-radius-sm);
+    animation: loadingBarIndeterminate 1.5s infinite;
+  }
+
+  @keyframes loadingBarIndeterminate {
+    from {
+      left: -50%;
+    }
+    to {
+      left: 100%;
+    }
+  }
+}

src/components/LoadingBar/loadingBar.astro

@@ -0,0 +1,19 @@
+---
+export interface Props {
+  type:        'known' | 'unknown';
+  percentage?: number;
+  width?:      string;
+}
+const { type, percentage, width } = Astro.props;
+---
+<div class='loading-bar loading-bar--${type}' style={width ? `width: ${width}` : undefined}>
+  {type === 'known' && percentage !== undefined ? (
+    <div class='loading-bar__progress' style={`width: ${percentage}%`}></div>
+  ) : (
+    <div  class='loading-bar__unknown'></div>
+  )}
+</div>
+
+<style lang="scss">
+@use './loadingBar';
+</style>