Alert Avatar Bottom sheet Button Card Carousel Cards Checkbox Chip Circular button Compact date input Copy Block Critical banner Date input Date picker Divider Dropdown Icon button Image Ratios Instruction Media Button Modal Money input Navigation option Nudge Password input Popover Progress Bar Progress Spinners Promo card Radio Screen loader When to useBest practicePlacementAvailability Search input Section header Segmented control Select Snackbar Summary Switch Table Tabs Text area Text input Upload Upload input
Design at Wise Foundations Components AlertAvatarBottom sheetButtonCardCarousel CardsCheckboxChipCircular buttonCompact date inputCopy BlockCritical bannerDate inputDate pickerDividerDropdownIcon buttonImage RatiosInstructionMedia Button ModalMoney inputNavigation optionNudgePassword inputPopoverProgress Bar Progress SpinnersPromo cardRadioScreen loaderSearch inputSection headerSegmented controlSelectSnackbarSummarySwitchTableTabsText areaText inputUploadUpload inputPatterns Resources
Screen loader

A screen loader is a temporary indicator to tell the user that a screen is loading. Once it’s finished, the loader is replaced by the screen. If on mobile please refer to the progress bar guidance page.

A loader.
When to use

Use a screen loader:

  • when you want the loader to overlay the whole screen

Don't use a screen loader:

  • when an in-line loader would make more sense and be less disruptive to the user experience
  • when you use Forest Green theme for the screen

Best practice

Make sure screen loaders that show one after the other on different screens are the same size and position. Test the whole flow to check the screen loaders are consistent from start to finish in terms of screen location and size.

Placement

The screen loader should be centred horizontally on the screen, and be towards the top of the screen on Web.

Availability

Platform

Developer documentation

Android

iOS

Web