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.
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.
The progress bar is always full width. On narrow screens, the description will be above the progress count.
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.