Action button Alert Avatar Bottom sheet Button Card Checkbox Chip Circular button Compact date input Critical banner Date input Date picker Dropdown Instruction Modal Money input Navigation option Nudge Password input Popover Progress Bar TypesWhen to useProgress Spinner vs Progress BarPlacement and SpecsLight and dark modeProgress Spinners Promo card Radio Screen loader Search input Section header Segmented control Select Snackbar Summary Switch Tabs Text area Text input Upload Upload input Copy Block Image Ratios Carousel Cards
Design at Wise Foundations Components Action buttonAlertAvatarBottom sheetButtonCardCheckboxChipCircular buttonCompact date inputCritical bannerDate inputDate pickerDropdownInstructionModalMoney inputNavigation optionNudgePassword inputPopoverProgress Bar Progress SpinnersPromo cardRadioScreen loaderSearch inputSection headerSegmented controlSelectSnackbarSummarySwitchTabsText areaText inputUploadUpload inputCopy BlockImage RatiosCarousel CardsPatterns Resources
Progress bar

The Progress bar informs the user that the system needs time to load content. If you are on web please refer to screen loader guidance page.

Types

There are two types of progress bars, indeterminate and determinate.

Indeterminate

The indeterminate progress bar shows that a process is happening, but there's an unspecified amount of wait time.

Determinate

The determinate progress bar displays how long a process will take. They are used when the progress is very fast or when the progress is changes from unknown to known. The determinate progress bar always plays from 0 - 100% before exiting the frame.

When to use

Progress bars are used when the server cannot reliably predict what content will be loaded next.

If the action take less then 200 milliseconds to load content, no loading state is needed.

If the action takes longer than 200ms the determinate bar is shown for 700ms.

At 700ms we decide to either exit the animation or...

...run the Indeterminate state.

When the app knows what content to load the indeterminate progress indicator changes to a determinate progress indicator.

Three different types of reassuring messages cycle and loop indefinitely.

If there is an unusual long wait time due to poor connection reassuring copy will appear on screen after approximately 5000ms.

Progress Spinner vs Progress Bar

The progress spinner and bar are used to communicate different loading behaviours.

Progress Spinner

The Progress spinner should be used to add reassurance when the user is executing long and/or stressful tasks. Stressful tasks can include situations like, uploading documents, sending money or retrieving card details. To find out more on when to use progress spinners click here.

Progress Bar

The progress bar should be used when the user is performing generic tasks that usually load fast. Generic tasks can include situations like, loading content following navigation or loading data in back ground after an action has been performed.

Placement and Specs

Place a progress bar within the container that's loading. If a group of items is loading, place a progress indicator at the top of the page, to show progress of the whole group.

Progress bar with sizing specifications.
Progress bar placement on a modal
Progress bar placement on a banner
Progress bar placement on bottom sheets

A progress bar can be placed at the top of bottom sheets centred.

Light and dark mode

Light mode and dark mode use different tapestry fills.

Progress bar in light mode

Tapestry 05

Progress Bar in dark mode

Tapestry 08