Add progress bar docs

Author: bendera

astro.config.mjs

@@ -102,6 +102,7 @@ export default defineConfig({
             { label: "Icon", link: "components/icon" },
             { label: "Label", link: "components/label" },
             { label: "Option", link: "components/option" },
+            { label: "ProgressBar", link: "components/progress-bar" },
             { label: "ProgressRing", link: "components/progress-ring" },
             { label: "Radio", link: "components/radio" },
             { label: "RadioGroup", link: "components/radio-group" },
@@ -177,6 +178,7 @@ export default defineConfig({
             { label: "Icon", link: "components/icon/api" },
             { label: "Label", link: "components/label/api" },
             { label: "Option", link: "components/option/api" },
+            { label: "ProgressBar", link: "components/progress-bar/api" },
             { label: "ProgressRing", link: "components/progress-ring/api" },
             { label: "Radio", link: "components/radio/api" },
             { label: "RadioGroup", link: "components/radio-group/api" },

src/components/examples/progress-bar/Imports.astro

@@ -0,0 +1,3 @@
+<script>
+  import "@vscode-elements/elements/dist/vscode-progress-bar/index.js";
+</script>

src/content/docs/components/progress-bar.mdx

@@ -0,0 +1,47 @@
+---
+title: Progress Bar
+---
+
+import Demo from "@components/Demo.astro";
+import PageSwitcher from "@components/PageSwitcher.astro";
+import Imports from "@components/examples/progress-bar/Imports.astro";
+
+<Imports />
+<PageSwitcher />
+
+## Basic example
+
+<Demo>
+  <vscode-progress-bar></vscode-progress-bar>
+  <Fragment slot="html">
+    ```html
+    <vscode-progress-bar></vscode-progress-bar>
+    ```
+  </Fragment>
+</Demo>
+
+## Long running threshold
+
+Switches to a gentler animation after a while in indeterminate mode, consuming fewer resources.
+
+<Demo>
+  <vscode-progress-bar long-running-threshold="1000"></vscode-progress-bar>
+  <Fragment slot="html">
+    ```html 'long-running-threshold="1000"'
+    <vscode-progress-bar long-running-threshold="1000"></vscode-progress-bar>
+    ```
+  </Fragment>
+</Demo>
+
+## Determinate mode
+
+Set a specific value. The `max` value is optional, its default value is 100.
+
+<Demo>
+  <vscode-progress-bar max="100" value="70"></vscode-progress-bar>
+  <Fragment slot="html">
+    ```html 'value="70"'
+    <vscode-progress-bar max="100" value="70"></vscode-progress-bar>
+    ```
+  </Fragment>
+</Demo>

src/pages/components/[component]/api.astro

@@ -19,6 +19,7 @@ export function getStaticPaths() {
     { params: { component: "label" } },
     { params: { component: "multi-select" } },
     { params: { component: "option" } },
+    { params: { component: "progress-bar" } },
     { params: { component: "progress-ring" } },
     { params: { component: "radio" } },
     { params: { component: "radio-group" } },