HomeFoundationsComponents
AccordionAction IconBreadcrumbButtonButton GroupCardCheckboxChipContext Switcher
Data VisualizationComing Soon
Date PickerComing Soon
DialogEmpty State
Form LabelComing Soon
ImageInputLinkListLoaderMenuModalPopoutProgress BarRadioRange SliderScroll BarSelectStepperSwitch
TableComing Soon
TabsTileToastToggle ButtonTooltip
PatternsDevelopmentFAQ
Loader
Last Updated on Sep 29, 2022
Loaders inform the user of an extended latency in presenting content to the user. They are indeterminate progress indicators that can show in a container or full screen.
View Figma ComponentView MAF Storybook

Design Principles

  • Loaders inform the user of loading or computing processes being carried out by the system. With a loader, no progression status is available.
  • If necessary, a loader could be used to to delay loading if content flashes in an unpleasant way. This should not be common, but is acceptable.

Do's and Don'ts

Use when loading content for an entire page, a modal, or other container.
Don’t use loaders unless absolutely necessary. Default to content loading instantly.
Table of Contents
Component VariantsDesign PrinciplesDo's and Don'ts
Related Components
Empty State
Copyright © 2022 The Nielsen Company (US), LLC. All Rights Reserved.