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>

src/components/index.ts

@@ -11,3 +11,4 @@ export { default as Link }         from './Link/link.astro';
 export { default as ListItem }     from './ListItem/listItem.astro';
 export { default as ListItemTitle } from './ListItem/listItemTitle.astro';
 export { default as ListItemSubtitle } from './ListItem/listItemSubtitle.astro';
+export { default as LoadingBar }    from './LoadingBar/loadingBar.astro';

src/pages/index.astro

@@ -10,6 +10,7 @@ import Link from '../components/Link/link.astro';
 import ListItem from '../components/ListItem/listItem.astro';
 import ListItemTitle from '../components/ListItem/listItemTitle.astro';
 import ListItemSubtitle from '../components/ListItem/listItemSubtitle.astro';
+import LoadingBar from '../components/LoadingBar/loadingBar.astro';
 import {
   Arrow2Icon, BinIcon, BurgerIcon, CalendarIcon, CheckIcon, CloseIcon,
   CodeIcon, CubeIcon, DownloadIcon, FilterIcon, HelpIcon, HomeIcon,
@@ -24,6 +25,14 @@ const initialChecked = true;
 <Layout>
   <main>
     <h1>Nova Design System</h1>
+    <section>
+      <h2>Loading Bar</h2>
+      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
+        <LoadingBar type="known" percentage={75} width="500px" />
+        <LoadingBar type="unknown" width="500px" />
+      </div>
+      </div>
+    </section>
     <section>
       <h2>List Item</h2>
       <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">