Progress bar

Introduction

The progress bar is used to visualize progress.

View in Groundhog

Unlike the loading distractor that doesn't indicate how long something will take, the progress bar displays how far along the process is. The progress bar ist themable.

Styleguide

The progress bar consists of a description, the progress count (e.g. 10/90 days, 70% loaded) and a bar, which visualized the progress.

font-family: Bernina Sans Regular
font-size: 14px
color: $gray-700
text-align: left

font-family: Bernina Sans Semibold
font-weight: 600
font-size: 14px
color: $gray-900
text-align: right

width: 100%
height: 4px
color: theme color shade 200
margin-top: 8px

color: main theme color
width: 100%
height: 4px
margin-top: 8px

Progress bar on dark background

On dark background, the description and progress count colors change to #fff.

Responsive behavior

The progress bar is always full width. On narrow screens, the description will be above the progress count.

Animation

Once the bar has finished loading, it will fade out after 1s and the loaded content will move up to fill the space where the progress bar used to be.

The fade out transition takes 500ms.