Skip to main content



The ns-skeleton component is a placeholder to show that content is loading.

Example showing a paragraph type ns-skeleton

The example above shows the visual representation for a paragraph. There are also options for text, headings, and subheadings.


This component is hidden to screen readers. It will add a message, visible only to screen readers, within the parent element stating "Loading". When the skeleton component is removed from the DOM it will find the loading message and delete it.

To prevent users with cognitive disabilities from being overwhelmed; the shimmer animation loops for 6 seconds then stops.

Best practice#

๐Ÿ’š Do's๐Ÿ’” Don'ts
Use to show a block of content is loadingUse for partial content
Use within a component slotUse for actionable elements like tabs or cta's
Use if content will load under 5 secondsUse for media
Use if part of the page is updating or loading

Considerations of best practice#

  • It should not have any siblings that are not itself, i.e. it is the only child of its parent element.
  • The use of a skeleton should be considered as a last resort for page loading.
  • Partial content cannot be used as it will conflict with the messaging that this is loading.
  • If loading times are longer than a few seconds, consider using a Stopgap instead.


Component placement#

The ns-skeleton component can be used in the following components:


typetypestringtexttext, paragraph, heading, subheadingVisual element it is representing

Specification notes#


Type can be manually picked, however it will automatically decide the best type based on the slot it is in.


  • Do you have insights or concerns to share? You can raise an issue via Github bugs.
  • See all the issues already raised via Github issues.

๐Ÿ’ฉ ๐ŸŽ‰ ๐Ÿฆ„ If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.