Progress Bar

Version	Tag	Status	API
v1	`<oc-progress-bar-v1>`	Stable, allowed for generation	ProgressBarV1

Overview

Source: ./src/components/progress-bar/Overview.mdx

The progress bar component enhances the user experience by providing a visual representation of progress in a task or process.

Default variation

Story Default:

<oc-progress-bar-v1 value="0.5"></oc-progress-bar-v1>

Configuration

The progress bar component offers a variety of styling variants, such as primary, secondary, success, warning, error, and hint. This component is configurable, allowing you to tailor its features and appearance to your specific needs. To explore all available options and see changes in real time, use the component configurator.

Usage guidelines

Before integrating the progress bar component into your project, make sure you have correctly installed the OTTO components package. Look through the variations page for examples of possible component variations. Here, you can discover both common and specific variations that address different use cases.

Info

See the Progress bar UX documentation for detailed user experience guidelines.

Accessibility

The progress bar component includes a set of built-in accessibility features to support all users.

Use `oc-aria-label`

To make the progress bar component accessible to screen readers, use the oc-aria-label attribute to provide clear and descriptive context information. See the general accessibility documentation for guidance on using oc-aria-label, including how it works with link and masked link behavior.

If oc-aria-label is not set, screen readers do not read any information.
If oc-aria-label is set, screen readers read the label, min, max, and current value.

You can write oc-aria-label as a mustache template to include properties in the text. For example:

<oc-progress-bar-v1
  oc-aria-label="Progress: {{value}} out of {{max}}"
  value="50"
  max="100"
></oc-progress-bar-v1>

Configuration

Source: ./src/components/progress-bar/Configuration.mdx

Progress bar configuration

Configure the progress bar component with the controls below and see the changes live in the preview canvas. Click the Show code button within the preview canvas to see the source code for the current component configuration.

Story Default:

<oc-progress-bar-v1 value="0.5"></oc-progress-bar-v1>

Interactive configurator (Storybook controls); every option is listed in the API section of this file.

API v1

Source: ./src/components/progress-bar/v1/ProgressBarV1.API.g.mdx

Progress Bar v1 API

API: `<oc-progress-bar-v1>` (ProgressBarV1)

The progress bar component is a customizable progress bar designed to display progress visually.

Attributes / properties

Attribute	Type	Default	Required	Description
`variant`	`"error" \| "primary" \| "secondary" \| "success" \| "warning" \| "hint"`	`"primary"`	no	The variant of the progress bar. The variant determines the color of the progress bar.
`size`	`"50" \| "100"`	`"100"`	no	The size of the progress bar. The size must be either 50 or 100.
`value`	`number`		yes	The value of the progress bar. The value must be between min and max.
`over-color`	`boolean`	`false`	no	Changes the track color of the progress bar to be placed on a colored surface.
`on-color`	`boolean`	`false`	no	Deprecated: Use `overColor` prop instead. Changes the track color of the progress bar to be placed on a colored surface.
`inverted`	`boolean`	`false`	no	Deprecated: Use `overColor` prop instead. Changes the track color of the progress bar to be placed on a colored surface.
`max`	`number`	`1`	no	The maximum value of the progress bar. The value must be greater than min.
`min`	`number`	`0`	no	The minimum value of the progress bar. The value must be less than max.
`steps`	`number`	`1`	no	The number of steps in the progress bar. The value must be greater than 0.
`oc-aria-label`	`string`	`undefined`	no	Sets the ARIA label of the progress bar. The value can be a mustache template that will be resolved at runtime. All props of the component can be used in the template.

Events

Event	Detail type	Description
`oc-property-change`	`OcProgressBarV1Events["oc-property-change"]`	Whenever a property value changes, this event triggers. Use this event to track all property changes within the component. Refer to the Events documentation for more information.
`oc-mount`	`{ component: string; }`	Fired when the component is mounted to the DOM. The event is fired when the onMount hook of the component is called by the runtime.
`oc-unmount`	`{ component: string; }`	Fired when the component is unmounted from the DOM. The event is fired when the function returned by the onMount hook of the component is called by the runtime.

Variations

Source: ./src/components/progress-bar/Variations.mdx

Variations

Listed below are the most common variations of the progress bar component as well as specific component variations for different use cases.

You can explore all available options using the component configurator, adjust the component to your needs, and see the changes live in a preview canvas.

Default

Story: components-progress-bar-variations--default · tags: components, progress-bar, 1, variations

The default variant highlights the current progress in a linear fashion.

<oc-progress-bar-v1 value="0.5"></oc-progress-bar-v1>

With steps

Story: components-progress-bar-variations--steps · tags: components, progress-bar, 1, variations

Variation using the steps attribute to indicate progress in discrete steps. Uses the value attribute to indicate the current step, min and max to define the range.

Args: min=0, max=4, steps=4, value=2

<oc-progress-bar-v1 value="2" min="0" max="4" steps="4"></oc-progress-bar-v1>

Warning

Story: components-progress-bar-variations--warning · tags: components, progress-bar, 1, variations

The warning variant indicates a warning state, typically used to alert users to potential issues.

Args: variant=warning

<oc-progress-bar-v1 value="0.5" variant="warning"></oc-progress-bar-v1>

Over color

Story: components-progress-bar-variations--over-color · tags: components, progress-bar, 1, variations

Variation using the over-color attribute to display the progress bar in an inverted style for better visibility on colored backgrounds.

Args: over-color=true

<oc-progress-bar-v1 value="0.5" over-color></oc-progress-bar-v1>

Demo: Points

Story: components-progress-bar-variations--demo-points · tags: components, progress-bar, 1, variations

Demo showcasing the success variant for indicating successful completion of a task or goal.

<div>Sammle noch 150 Punkte für 10€ Ersparnis</div>
<oc-progress-bar-v1
  variant="success"
  oc-aria-label="Punkte-Fortschritt, 350 von 500 Punkten"
  value="350"
  max="500"
></oc-progress-bar-v1>

Story source (TypeScript, verbatim from Storybook)

{
  name: "Demo: Points",
  argTypes: hideControlsBadge(Metadata),
  parameters: {
    controls: {
      disabled: true
    },
    docs: {
      story: {
        inline: false,
        height: "200px"
      }
    }
  },
  render() {
    return html`
      <div>Sammle noch 150 Punkte für 10€ Ersparnis</div>
      <oc-progress-bar-v1
        variant="success"
        oc-aria-label="Punkte-Fortschritt, 350 von 500 Punkten"
        value="350"
        max="500"
      ></oc-progress-bar-v1>
    `;
  }
}

Overview

Progress bar

Default variation

Configuration

Usage guidelines

Accessibility

Use oc-aria-label

Configuration

Progress bar configuration

API v1

Progress Bar v1 API

API: <oc-progress-bar-v1> (ProgressBarV1)

Attributes / properties

Events

Variations

Variations

Default

With steps

Warning

Over color

Demo: Points

Use `oc-aria-label`

API: `<oc-progress-bar-v1>` (ProgressBarV1)