Progress bar
Introduction
The progress bar is used to visualize progress.
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.
Description
font-family: Bernina Sans Regular
font-size: 14px
color: $gray-700
text-align: left
Count
font-family: Bernina Sans Semibold
font-weight: 600
font-size: 14px
color: $gray-900
text-align: right
Placeholder bar
width: 100%
height: 4px
color: theme color shade 200
margin-top: 8px
Progress bar
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.