Progress bar

Configurator

LiveProgress bar: variant, size, value range, steps and track for coloured surfaces

HTML

<oc-progress-bar-v1 min="0" max="5" variant="primary" size="100" value="2" oc-aria-label="Fortschritt deiner Bestellung"></oc-progress-bar-v1>

Usage

Anatomy

1 2 3

Indicator (progress)
Track
End point

LiveAnatomy

HTML

<div class="anatomy" style="width:min(400px,80%);margin:40px 24px 28px">
<oc-progress-bar-v1 value="0.55" oc-aria-label="Fortschritt"></oc-progress-bar-v1>
<span class="anatomy-pin" style="left:25%;top:-120%">1</span>
<span class="anatomy-pin" style="left:75%;top:-120%">2</span>
<span class="anatomy-pin" style="left:99%;top:220%">3</span>
<ol class="anatomy-key"><li data-n="1">Indicator (progress)</li><li data-n="2">Track</li><li data-n="3">End point</li></ol>

Variants

The progress bar is available in the sizes 100 and 50. The progress bar has two neutral variants and four functional variants:

primary
secondary
success
error
warning
hint

Size 100

Size 50

Neutral: primary, secondary

Functional: success, error, warning, hint

Livesizes 100 and 50 for neutral and functional variants

HTML

<div class="on-frame" style="margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px">
<p class="demo-label" style="padding-top:8px">Size 100</p><p class="demo-label" style="padding-top:8px">Size 50</p>
<p class="demo-label" style="grid-column:1/-1;padding-top:8px">Neutral: primary, secondary</p>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:24px 16px"><oc-progress-bar-v1 value="0.55" variant="primary"></oc-progress-bar-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:24px 16px"><oc-progress-bar-v1 value="0.55" variant="primary" size="50"></oc-progress-bar-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:24px 16px"><oc-progress-bar-v1 value="0.55" variant="secondary"></oc-progress-bar-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:24px 16px"><oc-progress-bar-v1 value="0.55" variant="secondary" size="50"></oc-progress-bar-v1></div>
<p class="demo-label" style="grid-column:1/-1;padding-top:8px">Functional: success, error, warning, hint</p>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:24px 16px"><oc-progress-bar-v1 value="0.55" variant="success"></oc-progress-bar-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:24px 16px"><oc-progress-bar-v1 value="0.55" variant="success" size="50"></oc-progress-bar-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:24px 16px"><oc-progress-bar-v1 value="0.55" variant="error"></oc-progress-bar-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:24px 16px"><oc-progress-bar-v1 value="0.55" variant="error" size="50"></oc-progress-bar-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:24px 16px"><oc-progress-bar-v1 value="0.55" variant="warning"></oc-progress-bar-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:24px 16px"><oc-progress-bar-v1 value="0.55" variant="warning" size="50"></oc-progress-bar-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:24px 16px"><oc-progress-bar-v1 value="0.55" variant="hint"></oc-progress-bar-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:24px 16px"><oc-progress-bar-v1 value="0.55" variant="hint" size="50"></oc-progress-bar-v1></div>

All variants can be set to over-color. Make sure to check this option, if you place the progress bar on colored backgrounds.

Neutral, over-color

Functional, over-color

Liveover-color variants

HTML

<div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px">
<p class="demo-label" style="grid-column:1/-1;padding-top:8px">Neutral, over-color</p>
<div style="background:var(--oc-semantic-color-background-frame, #f0f0f0);padding:24px 16px"><oc-progress-bar-v1 value="0.55" variant="primary" over-color></oc-progress-bar-v1></div>
<div style="background:var(--oc-semantic-color-background-frame, #f0f0f0);padding:24px 16px"><oc-progress-bar-v1 value="0.55" variant="secondary" over-color></oc-progress-bar-v1></div>
<p class="demo-label" style="grid-column:1/-1;padding-top:8px">Functional, over-color</p>
<div style="background:var(--oc-semantic-color-background-frame, #f0f0f0);padding:24px 16px"><oc-progress-bar-v1 value="0.55" variant="success" over-color></oc-progress-bar-v1></div>
<div style="background:var(--oc-semantic-color-background-frame, #f0f0f0);padding:24px 16px"><oc-progress-bar-v1 value="0.55" variant="error" over-color></oc-progress-bar-v1></div>
<div style="background:var(--oc-semantic-color-background-frame, #f0f0f0);padding:24px 16px"><oc-progress-bar-v1 value="0.55" variant="warning" over-color></oc-progress-bar-v1></div>
<div style="background:var(--oc-semantic-color-background-frame, #f0f0f0);padding:24px 16px"><oc-progress-bar-v1 value="0.55" variant="hint" over-color></oc-progress-bar-v1></div>

Behavior

Interaction

The progress bar is not interactive.

Placement

You can place the progress bar according to your needs. Make sure that you place it near its context elements. The progress bar should not be placed standalone.

Dir fehlen noch 40 € zum Mindestbestellwert von 80 €

Liveprogress bar with context element

HTML

<div class="on-frame" style="margin:0;padding:24px"><div class="demo-stack" style="background:var(--oc-semantic-color-background-canvas, #fff);padding:24px 16px;max-width:360px;margin:0 auto;gap:12px;padding:24px">
<oc-progress-bar-v1 value="40" max="80" oc-aria-label="Mindestbestellwert: {{value}} von {{max}} Euro"></oc-progress-bar-v1>
<p class="demo-copy">Dir fehlen noch 40 € zum Mindestbestellwert von 80 €</p>
</div>

Fitting

By default the width of the progress bar is set to fill-parent, but you can adjust the width of the progress bar according to your needs. The height of the progress bar is fixed to 8px at size 100 and 4px at size 50.

fill-parent

Livefitting width

HTML

<div class="on-frame" style="margin:0;padding:24px"><div class="demo-stack" style="background:var(--oc-semantic-color-background-canvas, #fff);padding:24px 16px;max-width:360px;margin:0 auto;gap:12px;padding:16px 24px 32px">
<p class="demo-label" style="text-align:center">fill-parent</p>
<oc-progress-bar-v1 value="0.5"></oc-progress-bar-v1>
</div>

Size 100: 8 px

Size 50: 4 px

Livefitting height

HTML

<div class="on-frame" style="margin:0;display:grid;gap:8px">
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:24px 16px;display:grid;grid-template-columns:auto minmax(0,360px);justify-content:center;align-items:center;gap:16px"><p class="demo-label">Size 100: 8 px</p><oc-progress-bar-v1 value="0.55"></oc-progress-bar-v1></div>
<div style="background:var(--oc-semantic-color-background-canvas, #fff);padding:24px 16px;display:grid;grid-template-columns:auto minmax(0,360px);justify-content:center;align-items:center;gap:16px"><p class="demo-label">Size 50: 4 px</p><oc-progress-bar-v1 value="0.55" size="50"></oc-progress-bar-v1></div>

Stepped

Use the stepped variant of the progress bar to display multiple steps of the task. The stepped progress bar can show how many steps of a task are completed and how many remain, e.g. for collecting OTTO Up points.

Dir fehlen noch 3 Bestellungen für 100 OTTO UP Punkte.

Livemultiple steps of a task

HTML

<div class="on-frame" style="margin:0;padding:24px"><div class="demo-stack" style="background:var(--oc-semantic-color-background-canvas, #fff);padding:24px 16px;gap:12px;padding:24px">
<oc-progress-bar-v1 value="2" min="0" max="5" steps="5" oc-aria-label="OTTO UP Punkte: {{value}} von {{max}} Bestellungen"></oc-progress-bar-v1>
<p class="demo-copy">Dir fehlen noch 3 Bestellungen für 100 OTTO UP Punkte.</p>
</div>

Best Practices

Dir fehlen noch 40 € zum Mindestbestellwert von 80 €

DoPlace the progress bar with context.

Don'tPlace the progress bar without context.

Dir fehlen noch 40 € zum Mindestbestellwert von 80 €

DoUse the progress bar for tasks.

Seite wird geladen.

Don'tUse the progress bar for loading states, use the skeleton or spinner instead.

Vervollständige den letzten Schritt, um dein Konto anzulegen.

DoUse the functional variants according to their semantic meaning.

Vervollständige den letzten Schritt, um dein Konto anzulegen.

Don'tUse the functional variants for decorative purposes or against their intended semantic meaning.

In 40 Schritten hast du es geschafft!

CautionAvoid adding too many steps to the stepped progress bar.

Accessibility

For information on accessibility, refer to the technical documentation.

Status

Implementation

Note: For full technical documentation of this component, visitStorybook/Progress bar.

Live demo

Sneaker aus Glattleder — LiveReal OTTO components, rendered by the OTTO component runtime

Code

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

Overview

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

Default variation

HTML

<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:

HTML

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

Configuration

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.

HTML

<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

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

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.

HTML

<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

HTML

<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

HTML

<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

HTML

<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.

Sammle noch 150 Punkte für 10€ Ersparnis

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>

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>
    `;
  }
}

Configurator

Usage

Anatomy

Variants

Behavior

Interaction

Placement

Fitting

Stepped

Best Practices

Accessibility

Status

Implementation

Live demo

Code

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)