Loading Placeholder
A single loading placeholder element used in a loading skeleton to visually communicate that piece of content.
Also known as:
SkeletonStencilPlaceholder UI
- Overview
- Autocomplete (not built)
- Avatar
- Badge
- Button
- Button Group (not built)
- Card
- Checkbox Group
- Collapsible
- Commentary
- Content
- Date Picker (not built)
- Divider
- Drawer
- Dropdown
- Empty State
- Filter Menu
- Global Notification
- Guidance Block
- Hero Card
- Icon
- Icon Button
- Illustration
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Menu
- Modal
- Pagination (not built)
- Popover
- Progress Bar (not built)
- Progress Stepper
- Radio
- Radio Group
- Rich Text Editor
- Search Field (not built)
- Select
- Slider (not built)
- Split Button
- Table
- Tabs
- Tag
- Tile
- Tile Grid
- Toast Notification
- Tooltip
- Well
Visuals
UI Kit
To keep in mind
- Indicate the shape of content to arrive in a loading skeleton.
- Loading placeholders follow the shape and form of what will be loaded – the width, height, colors and text line-heights align to the built components.
- Assuming the content will instantly load without a page reload, animate the loading placeholder’s opacity.
- If the skeleton loading will load in content when it’s ready without refreshing the page, animate the loading placeholders. We don’t currently use gradients in our branding aesthetic, so for ‘shimmering’ skeletons we opt for opacity changes rather than animated gradients.
When to use and when not to use
When to use
- Use with a loading skeleton.
When not to use
- Only use loading placeholders with loading skeletons.