@sveltestrap/sveltestrap/src/Progress/Progress.mdx

Bootstrap components for Svelte

import { Meta, Canvas, Controls, Story, Source } from '@storybook/blocks';
import * as ProgressStories from './Progress.stories';

<Meta title="Components/Progress" />

# Progress <small class="bootstrap-docs">[Bootstrap Progress](https://getbootstrap.com/docs/5.3/components/progress/)</small>

The `<Progress>` component displays the ongoing completion status of a task, process, or operation. It provides users with a visual indicator of how much of the task has been completed and gives a sense of the remaining time.

<Canvas>
  <Story of={ProgressStories.Basic} />
</Canvas>

<Controls of={ProgressStories.Basic} />

## Labels

<Canvas withSource="none">
  <Story of={ProgressStories.Labels} />
</Canvas>

<Source
  dark
  language="html"
  code={`
<script lang="ts">
  import { Progress } from '@sveltestrap/sveltestrap';
</script>

<Progress value={25} class="mb-2">25%</Progress>
<Progress value={50} class="mb-2">1/2</Progress>
<Progress value={75} class="mb-2">You're almost there!</Progress>
<Progress color="success" value={100} class="mb-2">You did it!</Progress>

<Progress multi class="mb-2">
  <Progress bar value={15}>Meh</Progress>
  <Progress bar color="success" value={30}>Wow!</Progress>
  <Progress bar color="info" value={25}>Cool</Progress>
  <Progress bar color="warning" value={20}>20%</Progress>
  <Progress bar color="danger" value={5}>!!</Progress>
</Progress>
`} />

## Striped

<Canvas withSource="none">
  <Story of={ProgressStories.Striped} />
</Canvas>

<Source
  dark
  language="html"
  code={`
<script lang="ts">
  import { Progress } from '@sveltestrap/sveltestrap';
</script>

<Progress striped value={2 * 5} class="mb-2" />
<Progress striped color="success" value={25} class="mb-2" />
<Progress striped color="info" value={50} class="mb-2" />
<Progress striped color="warning" value={75} class="mb-2" />
<Progress striped color="danger" value={100} class="mb-2" />

<Progress multi class="mb-2">
  <Progress striped bar value={10} />
  <Progress striped bar color="success" value={30} />
  <Progress striped bar color="warning" value={20} />
  <Progress striped bar color="danger" value={20} />
</Progress>
`} />

## Animated

<Canvas withSource="none">
  <Story of={ProgressStories.Animated} />
</Canvas>

<Source
  dark
  language="html"
  code={`
<script lang="ts">
  import { Progress } from '@sveltestrap/sveltestrap';
</script>

<Progress animated value={2 * 5} class="mb-2" />
<Progress animated color="success" value={25} class="mb-2" />
<Progress animated color="info" value={50} class="mb-2" />
<Progress animated color="warning" value={75} class="mb-2" />
<Progress animated color="danger" value={100} class="mb-2" />

<Progress multi class="mb-2">
  <Progress animated bar value={10} />
  <Progress animated bar color="success" value={30} />
  <Progress animated bar color="warning" value={20} />
  <Progress animated bar color="danger" value={20} />
</Progress>
`} />

## Multi

You can stack multiple bars in the same `Progress` component by passing `multi` to the parent element.

<Canvas withSource="none">
  <Story of={ProgressStories.Multi} />
</Canvas>

<Source
  dark
  language="html"
  code={`
<script lang="ts">
  import { Progress } from '@sveltestrap/sveltestrap';
</script>

<Progress multi>
  <Progress bar value={15} />
  <Progress bar color="success" value={20} />
  <Progress bar color="info" value={20} />
  <Progress bar color="warning" value={20} />
  <Progress bar color="danger" value={15} />
</Progress>

<Progress multi>
  <Progress bar value={15}>Meh</Progress>
  <Progress bar color="success" value={35}>Wow!</Progress>
  <Progress bar color="warning" value={25}>25%</Progress>
  <Progress bar color="danger" value={25}>LOOK OUT!!</Progress>
</Progress>

<Progress multi>
  <Progress bar striped value={15}>Stripes</Progress>
  <Progress bar animated color="success" value={30}>Animated Stripes</Progress>
  <Progress bar color="info" value={25}>Plain</Progress>
</Progress>
`} />

## Max

<Canvas withSource="none">
  <Story of={ProgressStories.Max} />
</Canvas>

<Source
  dark
  language="html"
  code={`
<script lang="ts">
  import { Progress } from '@sveltestrap/sveltestrap';
</script>

<Progress value={1} max={5} />
<Progress value={50} max={135} />
<Progress value={75} max={111} />
<Progress value={463} max={500} />

<Progress multi>
  <Progress bar value={5} max={55}>5</Progress>
  <Progress bar color="success" value={15} max={55}>15</Progress>
  <Progress bar color="warning" value={10} max={55}>10</Progress>
  <Progress bar color="danger" value={10} max={55}>10</Progress>
</Progress>
`} />

## Theming

<Canvas withSource="none">
  <Story of={ProgressStories.Theming} />
</Canvas>

<Source
  dark
  language="html"
  code={`
<script lang="ts">
  import { Progress } from '@sveltestrap/sveltestrap';
</script>

<div class="text-content">Dark Theme</div>
<Progress theme="dark" value={25} class="mb-2">25%</Progress>
<Progress theme="dark" striped value={2 * 5} class="mb-2" />
<Progress theme="dark" animated value={2 * 5} class="mb-2" />

<div class="text-content">Light Theme</div>
<Progress theme="light" value={25} class="mb-2">25%</Progress>
<Progress theme="light" striped value={2 * 5} class="mb-2" />
<Progress theme="light" animated value={2 * 5} class="mb-2" />
`} />