Skeleton
Skeleton loaders are used to show placeholder content for a loading state.
- Useful links:
Use cases
Section titled “Use cases”Make sure the Skeleton is suitable for your use case. There may be other, more appropriate components available.
| Use case | Progress | Skeleton |
|---|---|---|
| Showing a loading (or other) process where the progress is determinable | ✅ | ❌ |
| Showing an indeterminable loading progress | ✅ | ✅ |
| Showing a process other than loading, such as a calculation | ✅ | ❌ |
Variants
Section titled “Variants”Use the variant prop to choose the appropriate skeleton shape for the content being loaded.
- Circular: Use to represent avatars and other circular elements.
- Rectangular: Use to represent images and other rectangular elements.
- Rounded: Use to represent icons and other rounded non-text artifacts.
- Text: Default skeleton styling. Use to represent blocks of text.
- Combine different sizes and variants to best approximate the shape and size of the interface being loaded.
- Use multiple Skeletons with the “text” variant to represent a multi-line text paragraph.
- Include a single visually hidden message per loading state.
❌ Don’t
Section titled “❌ Don’t”- Don’t use Skeleton where the size and shape of the content and functionality being loaded is not known.
- Don’t use Skeleton to indicate the progress of any process except loading. For indicating the progress of calculations and other processes within a loaded interface, use Progress.