Archived version of the User Experience Toolkit for Insights Hub and Industrial IoT website, version 2.8.1

# Progress bar

##### A progress bar is a graphical representation of a (task) completion status.

## Usage

### When to use

Use a progress bar in the following cases:

- To visually represent the completion of a task or operation.
- For a process or procedure that may take a significant or unknown amount of time to complete.
- To visually represent the sequence of a system operation, e.g. downloading, uploading, loading data.
- To show that data is being requested, transmitted or processed.
- When a user needs to track a specific task or process.

Avoid using a progress bar in the following cases:

- When it is meant to guide the user through an interactive process, e.g. a multi-step form (better use a stepper).
- When the process is too fast to be actually perceived (better use a message, a badge or a similar component to convey a successfully finished process).

### Types

The following progress bar types are available:

#### Horizontal progress bar

A progress bar displays progress in a linear horizontal direction or along a line to indicate that the application is progressing.

Horizontal linear process bar

#### Determinate and indeterminate progress bars

Use a determinate progress indicator when the information about the progress is clear. The progress can be tracked and translated into an indicator which fills the track or circle from 0% to 100% and never decreases in value or resets.

Determinate progress bar

Use an indeterminate progress indicator when the information about the progress is unclear, the loading progress is unknown or the amount of waiting time can’t be calculated.

Indeterminate progress bar

#### Segmented progress bar

A segmented progress indicator is a visual representation of a user’s progress through a series of steps leading to the completion of a particular process. It is best suited for clear and distinct stages or steps that the system is completing. In situations where the user needs to complete specific steps through explicit interaction, use the Stepper component instead.

1. Segmented horizontal, 2. Segmented vertical

#### Global progress bar

A global progress bar is an element that stays at the top of the main region of the screen and is used to display the status of lengthy processes such as extensive file uploads. It is particularly useful when users needs to continue using other parts of the app without being blocked by the ongoing process. It should be used sparingly to avoid cluttering the interface, but can be a valuable addition to an app that involves long-running background processes.

Global progress bar in default and hover state

### General construction

1. Label, 2. Description, 3. Indicator, 4. Background track

5. Error message, 6. Status icon

#### 1. Label

- The label text describes the process the progress bar refers to.

#### 2. Description (optional)

- The description displays additional information about the process.

#### 3. Indicator

- The indicator shows how far the process has progressed.
- In case of an error, the indicator turns into a full-width red bar.
- In case of success, the indicator turns into a full-width green bar.

#### 4. Background track

- The background track is a static area that serves as a visual reference for the entire length and duration of the process.

#### 5. Error message

- If an error occurs, an error message and/or error handling appears.

#### 6. Status icon (optional)

- The status icon indicates the status of the progress bar after an error has occurred or after a task has successfully been completed.

### Options

The following progress bar options are available:

#### Sizes

1. Small progress bar, 2. Large progress bar

1. Small: Used when space is limited like in data table cells or side panels.
2. Large: Usually used when there is a lot of space on a page.

The width of a progress bar can vary based on its content. A progress bar should not be less than 64px wide.

#### Text alignment

1. Default, 2. Inline alignment, 3. Indent style, 4. Centered

The text alignment depends on the context and the space available. The indent style should only be used inside containers or side panels where the progress bar extends to the container’s edges.

### Behavior

There are four states for the progress bar: idle, active, success, and error. After successful or unsuccessful completion of the process, a progress bar can either remain for confirmation or validation, or be automatically hidden, depending on what is most suitable for the particular use case.

1. Idle state, 2. Active state, 3. Success state, 4. Error state

#### Percent or time-based labels

Use percent labels (the value changes over time) for operations that might take ~10 seconds or more.

Use time estimates for operations that may 1 minute or more.

### Dos & Don’ts

The progress bar should fill the area it belongs to so that the user immediately recognizes its relationship to the content.

Provide a general time estimate if possible. When it comes to time estimates, you don't have to be particularly accurate, especially if the value cannot be exactly calculated.

## Style

This chapter shows different progress bar styles in the User Experience Toolkit

Global progress bar example (process)

### Overview

Determinate progress bar

Indeterminate progress bar

1. Idle state, 2. Active state, 3. Success state, 4. Error state

1. Small progress bar, 2. Large progress bar

Segmented progress bar

1. Global progress bar (default), 2. Global progress bar with popover (hover)

### Text alignment

1. Default, 2. Inline alignment, 3. Indent style, 4. Centered

### Examples

Indent style example in sidebar

Size example loading screen

Global progress bar example (default state)

Global progress bar example (hover state)

## Progress bar

Upload
In progress | 152/256 GB

Upload
In progress | 152/256 GB

Upload
In progress | 152/256 GB

    <div class="progressbar">
        <label class="progressbar__label" for="progress1">Upload</label>
        <progress class="progress" id="progress1" value="32" max="100"></progress>
        <div class="progressbar__status">
            <div class="progressbar__description">In progress | 152/256 GB</div>
        </div>
    </div>

    <div class="progressbar progressbar--bold">
        <label class="progressbar__label" for="progress2">Upload</label>
        <progress class="progress" id="progress2" value="32" max="100"></progress>
        <div class="progressbar__status">
            <div class="progressbar__description">In progress | 152/256 GB</div>
        </div>
    </div>

    <div class="progressbar progressbar__indeterminate">
        <label class="progressbar__label">Upload</label>
        <div class="progress">
            <div class="progress__value"></div>
        </div>
        <div class="progressbar__status">
            <div class="progressbar__description">In progress | 152/256 GB</div>
        </div>
    </div>

## Progress bar states

Upload
Waiting...

Upload
Upload complete

Upload
Upload warning

Upload
Upload failed

    <div class="progressbar is-idle">
        <label class="progressbar__label" for="progress3">Upload</label>
        <progress class="progress" id="progress3" value="0" max="100"></progress>
        <div class="progressbar__status">
            <div class="progressbar__description">Waiting...</div>
        </div>
    </div>

    <div class="progressbar is-success">
        <label class="progressbar__label" for="progress_status1">Upload</label>
        <progress class="progress" id="progress_status1" value="100" max="100"></progress>
        <div class="progressbar__status">
            <div class="progressbar__description">Upload complete</div>
        </div>
    </div>

    <div class="progressbar is-warning">
        <label class="progressbar__label" for="progress_status2">Upload</label>
        <progress class="progress" id="progress_status2" value="100" max="100"></progress>
        <div class="progressbar__status">
            <div class="progressbar__description">Upload warning</div>
        </div>
    </div>

    <div class="progressbar is-error">
        <label class="progressbar__label" for="progress_status3">Upload</label>
        <progress class="progress" id="progress_status3" value="100" max="100"></progress>
        <div class="progressbar__status">
            <div class="progressbar__description">Upload failed</div>
        </div>
    </div>

## Segmented progress bar

Step1
Step2
Step3
In progress | 152/256 GB

Step1
Step2
Step3
In progress | 152/256 GB

    <div class="progressbar">
        <div class="progressbar__segments">
            <div class="progressbar__segment is-finished">
                <div class="progressbar__label">Step1</div>
                <div class="progress"></div>
            </div>
            <div class="progressbar__segment  is-finished">
                <div class="progressbar__label">Step2</div>
                <div class="progress"></div>
            </div>
            <div class="progressbar__segment">
                <div class="progressbar__label">Step3</div>
                <div class="progress"></div>
            </div>
        </div>
        <div class="progressbar__status">
            <div class="progressbar__description">In progress | 152/256 GB</div>
        </div>
    </div>

    <div style="height: 300px;"><!-- Only for this showcase-->

        <div class="progressbar">
            <div class="progressbar__segments progressbar__segments--vertical">
                <div class="progressbar__segment is-finished">
                    <div class="progressbar__label">Step1</div>
                    <div class="progress"></div>
                </div>
                <div class="progressbar__segment  is-finished">
                    <div class="progressbar__label">Step2</div>
                    <div class="progress"></div>
                </div>
                <div class="progressbar__segment">
                    <div class="progressbar__label">Step3</div>
                    <div class="progress"></div>
                </div>
            </div>
            <div class="progressbar__status">
                <div class="progressbar__description">In progress | 152/256 GB</div>
            </div>
        </div>

    </div><!-- Only for this showcase-->

## Progress bar text alignment option

Upload
In progress | 152/256 GB

Upload
In progress | 152/256 GB

Upload
In progress | 152/256 GB

    <div class="progressbar progressbar--center">
        <label class="progressbar__label" for="progress6">Upload</label>
        <progress class="progress" id="progress6" value="32" max="100"></progress>
        <div class="progressbar__status">
            <div class="progressbar__description">In progress | 152/256 GB</div>
        </div>
    </div>

    <div class="progressbar progressbar--indent">
        <label class="progressbar__label" for="progress7">Upload</label>
        <progress class="progress" id="progress7" value="32" max="100"></progress>
        <div class="progressbar__status">
            <div class="progressbar__description">In progress | 152/256 GB</div>
        </div>
    </div>

    <div class="progressbar progressbar--inline">
        <label class="progressbar__label" for="progress8">Upload</label>
        <progress class="progress" id="progress8" value="32" max="100"></progress>
        <div class="progressbar__status">
            <div class="progressbar__description">In progress | 152/256 GB</div>
        </div>
    </div>

## Progress bar top

Open demo

    <div class="progressbar progressbar__top">
        <label class="progressbar__label" for="progress1">32%</label>
        <progress class="progress" id="progressTop3" value="32" max="100"></progress>
        <div class="popover has-arrow is-bottom is-center-aligned is-shown">
            <div class="popover__container ">
                <div class="popover__content">
                    <div class="popover__title">
                        Uploading files (3/10)
                        <a class="button button--ghost" href="#">Clear completed</a>
                    </div>
                    <div class="list dropzone__itemState">
                        <ul class="list__list">
                            <li class="list__item">
                                <div class="item__image">
                                    <img src="assets/images/image.png" alt="image placeholder" />
                                    <div class="busyIndicator">
                                        <div class="busyIndicator__ring busyIndicator__ring--small"></div>
                                    </div>
                                </div>
                                <div class="item__content">
                                    <div class="content__column content__column--primary">
                                        <h4 class="item__title">
                                            Itemname.suffix
                                        </h4>
                                        <div class="item__description">
                                            57 MB
                                        </div>
                                    </div>
                                    <div class="content__column has-alignment-right">
                                        <button class="button button--ghost has-icon-only"></button>
                                    </div>
                                </div>
                            </li>
                            <li class="list__item itemState--upload">
                                <div class="item__icon">
                                    <span class="iconUxt filetypeDefault" aria-hidden="true"></span>
                                    <div class="busyIndicator">
                                        <div class="busyIndicator__ring busyIndicator__ring--small"></div>
                                    </div>
                                </div>
                                <div class="item__content">
                                    <div class="content__column content__column--primary">
                                        <h4 class="item__title">
                                            Itemname.suffix
                                        </h4>
                                        <div class="item__description">
                                            57 MB
                                        </div>
                                    </div>
                                    <div class="content__column has-alignment-right">
                                        <button class="button button--ghost has-icon-only"></button>
                                    </div>
                                </div>
                            </li>
                            <li class="list__item itemState--error">
                                <div class="item__icon">
                                    <span class="iconUxt image" aria-hidden="true"></span>
                                    <div class="busyIndicator">
                                        <div class="busyIndicator__ring busyIndicator__ring--small"></div>
                                    </div>
                                </div>
                                <div class="item__content">
                                    <div class="content__column content__column--primary">
                                        <h4 class="item__title">
                                            Itemname.suffix
                                        </h4>
                                        <div class="item__description">
                                            57 MB
                                        </div>
                                    </div>
                                    <div class="content__column has-alignment-right">
                                        <button class="button button--ghost has-icon-only"></button>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="height: 200px;"></div>

## Progress bar top with app example

Open demo

    <div class="appWrapper has-appBarAdvanced has-appBarAdvanced-collapsed">

        <div class="appWrapper__regions has-appHeader has-contextRegion has-leadingRegion contextRegion-is-expanded appWrapper__regions--pushLayout">

            <section class="appHeader">
                <div class="appHeader__breadcrumb">
                    <div class="breadcrumb">
                        <div class="breadcrumb__item">
                            <a href="#">Level 1</a>
                        </div>
                        <div class="breadcrumb__item">
                            <a href="#">Level 2</a>
                        </div>
                        <div class="breadcrumb__item">
                            <a href="#">Level 3</a>
                        </div>
                        <div class="breadcrumb__item is-current">
                            <a href="#">Current</a>
                        </div>
                    </div>
                </div>
                <div class="appHeader__content">
                    Optional content
                </div>
                <div class="appHeader__viewToggler">
                    <button class="button button--ghost has-icon-only button--leading" id="toggleLeadingRegionDemo">
                        <span aria-hidden="true" class="iconUxt"></span>
                    </button>

                    <button class="button button--ghost has-icon-only button--context" id="toggleContextRegionDemo">
                        <span aria-hidden="true" class="iconUxt is-flipped-horizontal"></span>
                    </button>
                </div>
            </section>

            <section class="leadingRegion">
            </section>

            <section class="mainRegion">
                <div class="progressbar progressbar__top">
                    <label class="progressbar__label" for="progress1">32%</label>
                    <progress class="progress" id="progressTop1" value="32" max="100"></progress>
                    <div class="popover has-arrow is-bottom is-center-aligned is-shown">
                        <div class="popover__container ">
                            <div class="popover__content">
                                <div class="popover__title">
                                    Uploading files (3/10)
                                    <a class="button button--ghost" href="#">Clear completed</a>
                                </div>
                                <div class="list dropzone__itemState">
                                    <ul class="list__list">
                                        <li class="list__item">
                                            <div class="item__image">
                                                <img src="assets/images/image.png" alt="image placeholder" />
                                                <div class="busyIndicator">
                                                    <div class="busyIndicator__ring busyIndicator__ring--small"></div>
                                                </div>
                                            </div>
                                            <div class="item__content">
                                                <div class="content__column content__column--primary">
                                                    <h4 class="item__title">
                                                        Itemname.suffix
                                                    </h4>
                                                    <div class="item__description">
                                                        57 MB
                                                    </div>
                                                </div>
                                                <div class="content__column has-alignment-right">
                                                    <button class="button button--ghost has-icon-only"></button>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="list__item itemState--upload">
                                            <div class="item__icon">
                                                <span class="iconUxt filetypeDefault" aria-hidden="true"></span>
                                                <div class="busyIndicator">
                                                    <div class="busyIndicator__ring busyIndicator__ring--small"></div>
                                                </div>
                                            </div>
                                            <div class="item__content">
                                                <div class="content__column content__column--primary">
                                                    <h4 class="item__title">
                                                        Itemname.suffix
                                                    </h4>
                                                    <div class="item__description">
                                                        57 MB
                                                    </div>
                                                </div>
                                                <div class="content__column has-alignment-right">
                                                    <button class="button button--ghost has-icon-only"></button>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="list__item itemState--error">
                                            <div class="item__icon">
                                                <span class="iconUxt image" aria-hidden="true"></span>
                                                <div class="busyIndicator">
                                                    <div class="busyIndicator__ring busyIndicator__ring--small"></div>
                                                </div>
                                            </div>
                                            <div class="item__content">
                                                <div class="content__column content__column--primary">
                                                    <h4 class="item__title">
                                                        Itemname.suffix
                                                    </h4>
                                                    <div class="item__description">
                                                        57 MB
                                                    </div>
                                                </div>
                                                <div class="content__column has-alignment-right">
                                                    <button class="button button--ghost has-icon-only"></button>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="contentHeader">
                    <div class="contentHeader__header">
                        <h1 class="header__headline">Page Title</h1>
                        <div class="header__subline">Optional subline</div>
                    </div>

                    <div class="contentHeader__actions">
                        <button class="button button--secondaryContentAction">
                            <span class="iconUxt addCircle" aria-hidden="true"></span>
                            Add Button
                        </button>

                        <a class="button button--secondaryContentAction" href="#">
                            <span class="iconUxt edit" aria-hidden="true"></span>
                            Edit Link
                        </a>

                        <a class="button button--secondaryContentAction" href="#">
                            <span class="iconUxt delete" aria-hidden="true"></span>
                            Delete Link
                        </a>
                    </div>
                </div>
            </section>

            <section class="contextRegion">
                <button class="button button--secondary" id="toggleSlidingBehaviour">
                    Toggle sliding behaviour for demo
                </button>
            </section>

        </div>

        <nav class="appBarAdvanced">
            <div class="appBarAdvanced__inner">
                <div class="appBarAdvanced__header">
                    <!-- optional header -->
                </div>
                <ul class="appBarAdvanced__content">
                    <li class="level1 is-home">
                        <a href="#" class="item__link">
                            <div class="item__icon">
                                <i aria-hidden="true" class="iconUxt home"></i>
                            </div>
                            <span class="item__title">Home</span>
                        </a>
                    </li>
                    <li class="level1 is-active">
                        <a href="#" class="item__link">
                            <div class="item__icon has-notification">
                                <i aria-hidden="true" class="iconUxt chartPie"></i>
                            </div>
                            <span class="item__title">Issues</span>
                            <span class="badge">31</span>
                        </a>
                        <ul class="level2">
                            <li class="subitem">
                                <a href="#">Details</a>
                            </li>
                            <li class="subitem">
                                <a href="#">Activity</a>
                            </li>
                        </ul>
                    </li>
                    <li class="level1">
                        <a href="#" class="item__link">
                            <div class="item__icon">
                                <i aria-hidden="true" class="iconUxt shoppingCart"></i>
                            </div>
                            <span class="item__title">Activity</span>
                        </a>
                        <ul class="level2">
                            <li class="subitem">
                                <a href="#">Details</a>
                            </li>
                            <li class="subitem">
                                <a href="#">Activity</a>
                            </li>
                        </ul>
                    </li>
                    <li class="level1">
                        <a href="#" class="item__link">
                            <div class="item__icon">
                                <i aria-hidden="true" class="iconUxt hierarchy"></i>
                            </div>
                            <span class="item__title">Members</span>
                        </a>
                        <ul class="level2">
                            <li class="subitem">
                                <a href="#">Details</a>
                            </li>
                            <li class="subitem">
                                <a href="#">Activity</a>
                            </li>
                        </ul>
                    </li>
                    <li class="level1 has-separator">
                        <a href="#" class="item__link">
                            <div class="item__icon has-notification">
                                <i aria-hidden="true" class="iconUxt subtenant4"></i>
                            </div>
                            <span class="item__title">Settings</span>
                            <span class="badge">12</span>
                        </a>
                        <ul class="level2">
                            <li class="subitem">
                                <a href="#">Details</a>
                            </li>
                            <li class="subitem">
                                <a href="#">Activity</a>
                            </li>
                        </ul>
                    </li>
                    <li class="level1">
                        <a href="#" class="item__link">
                            <div class="item__icon has-notification">
                                <i aria-hidden="true" class="iconUxt chartTrend"></i>
                            </div>
                            <span class="item__title"> Tools </span>
                            <span class="badge">4</span>
                        </a>
                        <ul class="level2">
                            <li class="subitem">
                                <a href="#"> Details </a>
                            </li>
                            <li class="subitem">
                                <a href="#"> Activity </a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <div class="appBarAdvanced__footer">
                    <a href="#" id="appBar--expander">
                        <!-- optional expand / collapse label -->
                        <span class="item__title">Collapse</span>
                    </a>
                </div>
            </div>
        </nav>
    </div>
    <script type="text/javascript" src="https://static.eu1.mindsphere.io/osbar/v4/js/main.min.js"></script>
    <script>
        window.onload = function (e) {

            // polyfill for closest() - IE11 does not support that out of the box
            if (!Element.prototype.matches) {
                Element.prototype.matches = Element.prototype.msMatchesSelector ||
                    Element.prototype.webkitMatchesSelector;
            }
            if (!Element.prototype.closest) {
                Element.prototype.closest = function (s) {
                    var el = this;

                    do {
                        if (Element.prototype.matches.call(el, s)) return el;
                        el = el.parentElement || el.parentNode;
                    } while (el !== null && el.nodeType === 1);
                    return null;
                };
            }

            // toggle expand / collapse feature of sidebar
            var toggle = document.querySelector("#appBar--expander");
            var appWrapper = document.querySelector(".appWrapper");
            toggle.addEventListener("click", function () {
                // appBar.classList.toggle("has-appBarAdvanced-collapsed");
                appWrapper.classList.toggle("has-appBarAdvanced-collapsed");
                var elems = document.querySelectorAll(".appBarAdvanced .level1");
                for (var i = 0; i < elems.length; i++) {
                    elems[i].classList.remove("is-shown");
                }
            });

            // set active state of item on click
            var level1links = document.querySelectorAll(".appBarAdvanced .item__link");
            for (var i = 0; i < level1links.length; i++) {
                level1links[i].addEventListener("click", function (event) {
                    for (var j = 0; j < level1links.length; j++) {
                        level1links[j].parentElement.classList.remove("is-active");
                    }
                    event.target.closest(".level1").classList.add("is-active");
                    event.target.blur();
                    event.target.parentNode.parentNode.blur(); // needed for collapsed mode
                    event.preventDefault();
                });
            }

            // add class to show app bar submenu on hover
            var timerHover;
            var collapsedAppBarElements = document.querySelectorAll(
                ".has-appBarAdvanced-collapsed .appBarAdvanced .level1"
            );
            var collapsedAppBarLinks = document.querySelectorAll(
                ".has-appBarAdvanced-collapsed .appBarAdvanced .level1 a"
            );
            for (var i = 0; i < collapsedAppBarLinks.length; i++) {
                collapsedAppBarLinks[i].addEventListener("mouseenter", function (event) {
                    clearTimeout(timerHover);
                    for (var j = 0; j < collapsedAppBarElements.length; j++) {
                        collapsedAppBarElements[j].classList.remove("is-shown");
                    }
                    event.target.closest(".level1").classList.add("is-shown");
                });
            }

            // hide all possible open app bar items on mouse-leave, but wait for a split second
            // to avoid unintentional mouseleave events
            var appBar = document.querySelector(".appBarAdvanced");
            appBar.addEventListener("mouseleave", function () {
                timerHover = setTimeout(function () {
                    for (var j = 0; j < collapsedAppBarElements.length; j++) {
                        collapsedAppBarElements[j].classList.remove("is-shown");
                    }
                }, 100);
            });
            var regionsWrapper = document.querySelector(".appWrapper__regions");

            // functionality to hide context and/or leadimg region through button
            var toggleLeading = document.querySelector("#toggleLeadingRegionDemo");
            toggleLeading.addEventListener('click', function () {
                regionsWrapper.classList.toggle('leadingRegion-is-expanded');
            });

            var toggleContext = document.querySelector("#toggleContextRegionDemo");
            toggleContext.addEventListener('click', function () {
                regionsWrapper.classList.toggle('contextRegion-is-expanded');
            });

            // functionality to toggle sliding behaviour for leading and context region
            var switchLayoutType = document.querySelector("#toggleSlidingBehaviour");
            switchLayoutType.addEventListener('click', function () {
                regionsWrapper.classList.toggle('appWrapper__regions--pushLayout');
            });
        }
    </script>

## Progress bar top on a card

32%
Uploading files (3/10) Clear completed

- #### Itemname.suffix

  57 MB

- #### Itemname.suffix

  57 MB

- #### Itemname.suffix

  57 MB

### Card title, not clickable

A short subline.

of cards Lorem ipsum dolor content of cards.

    <div class="card">
        <div class="progressbar progressbar__top">
            <label class="progressbar__label" for="progress1">32%</label>
            <progress class="progress" id="progressTop4" value="32" max="100"></progress>
            <div class="popover has-arrow is-bottom is-center-aligned is-shown">
                <div class="popover__container ">
                    <div class="popover__content">
                        <div class="popover__title">
                            Uploading files (3/10)
                            <a class="button button--ghost" href="#">Clear completed</a>
                        </div>
                        <div class="list dropzone__itemState">
                            <ul class="list__list">
                                <li class="list__item">
                                    <div class="item__image">
                                        <img src="assets/images/image.png" alt="image placeholder" />
                                        <div class="busyIndicator">
                                            <div class="busyIndicator__ring busyIndicator__ring--small"></div>
                                        </div>
                                    </div>
                                    <div class="item__content">
                                        <div class="content__column content__column--primary">
                                            <h4 class="item__title">
                                                Itemname.suffix
                                            </h4>
                                            <div class="item__description">
                                                57 MB
                                            </div>
                                        </div>
                                        <div class="content__column has-alignment-right">
                                            <button class="button button--ghost has-icon-only"></button>
                                        </div>
                                    </div>
                                </li>
                                <li class="list__item itemState--upload">
                                    <div class="item__icon">
                                        <span class="iconUxt filetypeDefault" aria-hidden="true"></span>
                                        <div class="busyIndicator">
                                            <div class="busyIndicator__ring busyIndicator__ring--small"></div>
                                        </div>
                                    </div>
                                    <div class="item__content">
                                        <div class="content__column content__column--primary">
                                            <h4 class="item__title">
                                                Itemname.suffix
                                            </h4>
                                            <div class="item__description">
                                                57 MB
                                            </div>
                                        </div>
                                        <div class="content__column has-alignment-right">
                                            <button class="button button--ghost has-icon-only"></button>
                                        </div>
                                    </div>
                                </li>
                                <li class="list__item itemState--error">
                                    <div class="item__icon">
                                        <span class="iconUxt image" aria-hidden="true"></span>
                                        <div class="busyIndicator">
                                            <div class="busyIndicator__ring busyIndicator__ring--small"></div>
                                        </div>
                                    </div>
                                    <div class="item__content">
                                        <div class="content__column content__column--primary">
                                            <h4 class="item__title">
                                                Itemname.suffix
                                            </h4>
                                            <div class="item__description">
                                                57 MB
                                            </div>
                                        </div>
                                        <div class="content__column has-alignment-right">
                                            <button class="button button--ghost has-icon-only"></button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card__header">
            <h3 class="card__title">
                Card title, not clickable
            </h3>
            <p class="card__subline">
                A short subline.
            </p>
        </div>
        <div class="card__content">
            <p>of cards Lorem ipsum dolor content of cards.</p>
        </div>
    </div>

#### Usage

Element | Class | Description
--- | --- | ---
`.progressbar` | `.progressbar--bold` | Changes the progress bar to a bold variant.
`.progressbar` | `.progressbar__indeterminate` | Enables the indeterminate progress bar.
`.progressbar` | `.is-idle`, `.is-success`, `.is-warning`, `.is-error` | Changes the state of the progress bar.
`.progressbar__segments` | `.progressbar__segments--vertical` | Switch to the vertical variant.
`.progressbar__segment` | `.is-finished` | Finish the whole segment.
`.progressbar` | `.progressbar--center`, `.progressbar--indent`, `.progressbar--inline` | Applies different text alignments.
`.progressbar` | `.progressbar__top` | A progress bar that is placed on top of a container, with a popover that appears on hover.
`.progressbar__top` | `.is-expanded` | Popover is displayed permanently.

Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Back to top