Progress bar

The Progress provides flexible options for styling, orientation, and labeling. It supports both horizontal and vertical layouts, with customizable thickness, rounded corners, and additional styling classes. The progress value is determined by the start and end props, and labels can be displayed in different styles.

The following example shows a simple progress bar with a set start and end value, along with a label:

<script>
  import { Progress } from "theui-svelte";
</script>

<Progress end={55} />

The end prop define the end limit of the progress. The start is 0 default.

The start and end props define the progress range. The start prop sets the initial value, while the end prop sets the final value of the progress bar. By default, both values are 0, which is the minimum value. The maximum value is 100.

• If start and end are equal, the progress bar will appear empty. Only the label will be display (if available).
• If start is greater than end, they will swap their values to work properly.
• If end is greater than start (which is expected), the progress bar will fill accordingly.
• If end exceeds the maximum range (100), it will be considered as 100.

<Progress start={55} end={55} label="55" />
<Progress start={75} end={55} label="55" />
<Progress start={25} end={55} label="55" />
<Progress start={25} end={155} label="55" />

The thickness prop controls the thickness of the progress bar. It accepts five values: 'px', 'sm', 'md', 'lg', and 'xl'. The default value is 'md'.

<Progress end={55} label="55" thickness="px" />
<Progress end={55} label="55" thickness="sm" />
<Progress end={55} label="55" thickness="md" />
<Progress end={55} label="55" thickness="lg" />
<Progress end={55} label="55" thickness="xl" />

The label prop defines the text displayed on the Progress bar, which can represent progress values or any custom text. By default, no label is shown unless explicitly set.

The labelVariant prop controls the appearance of the label. When set to "inline", the label appears as inline text. When set to "bubble", the label is enclosed within a bubble for better visibility. The default value for this prop is "bubble".

<Progress end={55} label="55" />
<Progress end={55} label="55" labelVariant="inline" thickness="lg" />

You can add a vertical progress bar by jus adding the vertical attribute to the Progress.

<Progress end={55} label="55" vertical />

You can update the progress bar with dynamically by making it reactive. The example given below.

<script lang="ts">
  import {Progress} from "$lib";
  let startValue = $state(0)
  let endValue = $state(40)
</script>

<Progress start={startValue} end={endValue} label={endValue}/>

<input type="range" bind:value={startValue} />
<input type="range" bind:value={endValue} />

The progress bar is fully customizable. Use the barClasses prop to apply custom styles to the progress bar, and the bubbleClasses prop to customize the bubble label. The rounded prop controls the border radius of the progress bar. To further customize the progress bar track, apply classes directly to the Progress component using the class attribute.

<Progress
  end={50}
  label="50"
  barClasses="bg-green-400"
  bubbleClasses="bg-green-600 text-white"
  class="bg-green-100"
  thickness="lg"
  rounded="none"
/>

TThe Progress component is designed to be accessible, providing clear indicators of progress for all users. To ensure the component is fully accessible:

• ARIA attributes: The component automatically uses aria-valuenow, aria-valuemin, and aria-valuemax to communicate the current progress and its range to screen readers.
• Color contrast: Ensure sufficient color contrast to make the progress bar readable for users with visual impairments.
• Label visibility: When using the "bubble" label variant, ensure the label is positioned properly and does not obstruct key content, ensuring a smooth user experience.