Halstack
Design system
v6.0.0
OverviewIntroduction
ComponentsAccordionAlertApplication layoutBleedBoxBulleted ListButtonCardCheckboxChipDate InputDialogDropdownFile InputFlexFooterHeaderHeadingInsetLinkNav TabsNumber InputPaginatorParagraphPassword InputProgress BarQuick NavRadio GroupResultset TableSelectSidenavSliderSpinnerSwitchTableTabsTagText InputTextareaToggle GroupTypographyWizard
Progress Bar
Ready
Progress indicators offer visibility of system status to the user, giving feedback to indicate that the application is taking some time to processing data. The main aim of these components is to reduce the user's uncertainty about offering something to look at while the user is waiting for the end. A progress bar should be used in any scenario that will take more than 1 second in performing the action, for anything that takes less than that time, it will be distracting for the user.
- 1.Label (Optional)
- 2.Progress track line
- 3.Helper text (Optional)
- 4.Progress total line
- 5.Progress indicator (Optional)
| Component token | Element | Token | Value |
|---|---|---|---|
trackLineColor | Track line | color-purple-700 | #5f249f |
trackLineColorOnDark | Track line | color-purple-500 | #a46ede |
totalLineColor | Total line | color-grey-200 | #e6e6e6 |
labelFontColor | Label | color-black | #000000 |
labelFontColor | Label | color-black | #000000 |
labelFontColorOnDark | Label | color-white | #ffffff |
indicatorFontColor | Indicator | color-black | #000000 |
indicatorFontColorOnDark | Indicator | color-white | #ffffff |
helperFontColor | Helper text | color-black | #000000 |
helperFontColorOnDark | Helper text | color-white | #ffffff |
overlayColor | Overlay | color-grey-800-a | #000000b3 |
Edit this page on GitHub
PreviousPassword Input
NextQuick Nav