Use Skeleton when:
Use Loader when:
<dt-skeleton :animate="false" aria-label="Loading" /><dt-skeleton aria-label="Loading" />To customize a non-animating Skeleton background color modify the --placeholder-from-color variable with an inline style.
<dt-skeleton
:animate="false"
:text-option="{
style: '--placeholder-from-color: var(--dt-color-blue-400)',
}"
aria-label="Loading"
/>Customize an animating Skeleton by modifying the --placeholder-from-color and --placeholder-to-color variables with an inline style.
<dt-skeleton
:text-option="{
style: '--placeholder-from-color: var(--dt-color-blue-400); --placeholder-to-color: var(--dt-color-blue-200);',
}"
aria-label="Loading"
/>Default sizes match the avatar size. Size is customizable when needed.
<p>S (24x24px)</p> <dt-skeleton :shape-option="{ shape: 'circle', size: 'sm' }" :animate="false" /> <p>M (32x32px)</p> <dt-skeleton :shape-option="{ shape: 'circle' }" :animate="false" /> <p>L (48x48px)</p> <dt-skeleton :shape-option="{ shape: 'circle', size: 'lg' }" :animate="false" />
<p>S (24x24px)</p> <dt-skeleton :shape-option="{ shape: 'square', size: 'sm' }" :animate="false" /> <p>M (32x32px)</p> <dt-skeleton :shape-option="{ shape: 'square' }" :animate="false" /> <p>L (48x48px)</p> <dt-skeleton :shape-option="{ shape: 'square', size: 'lg' }" :animate="false" />
<p>Small</p> <dt-skeleton :text-option="{ type: 'heading', headingHeight: 'sm', width: '160px' }" :animate="false" /> <p>Medium</p> <dt-skeleton :text-option="{ type: 'heading', width: '240px' }" :animate="false" /> <p>Large</p> <dt-skeleton :text-option="{ type: 'heading', headingHeight: 'lg', width: '320px' }" :animate="false" />
<dt-skeleton :paragraph-option="{ rows: 5, randomWidth: true }" :animate="false" /><dt-skeleton
:list-item-option="{ shapeSize: 'sm', paragraphs: { rows: 1 } }"
/><dt-skeleton
:list-item-option="{
shapeSize: '2rem',
shape: 'square',
paragraphs: {
rows: 1,
},
}"
/><dt-skeleton
:list-item-option="{
shapeSize: '3.6rem',
paragraphs: {
rows: 4,
width: [
'120px', '311px', '371px', '279px',
],
},
}"
/>For sighted users, they are able to see that there is loading content and no other action is needed until loading completes. Likewise, there is nothing that needs to be added for keyboard users. For users who rely on assistive technology, skeleton's visual representation of a loading state won't be accessible without additional labeling.
It's role="status" on the skeleton component, keep in mind, that:
The aria live region role of status has an implicit aria-live value of polite, which allows a user to be notified
via AT (such as a screen reader) when status messages are added. The role of status also has a default aria-atomic
value of true, so that updates to the container marked with a role of status will result in the AT presenting the
entire contents of the container to the user, including any author-defined labels (or additional nested elements).
aria-busy state indicates an element is being modified and that assistive technologies may want to wait until the
changes are complete before informing the user about the update.
When multiple parts of a live region need to be loaded before changes are announced to the user, set aria-busy="true"
until loading is complete. Then set to aria-busy="false". This prevents assistive technologies from announcing changes
before updates are done.
If you need fully accessible skeleton and loading content, probably you will want to add aria-live="polite"
and aria-busy="false" to corresponding loaded html element content.
<dt-skeleton
v-if="loading"
:aria-label="$i18n('Loading')"
/>
<p
v-else
aria-live="polite"
aria-busy="false"
>
Loaded content.
</p>
import { DtSkeleton } from '@dialpad/dialtone-vue';
Name
|
Default
|
Type
|
|---|---|---|
animate | true |
"true"
|
"false"
This property has higher priority than "option.animate" |
animationDuration | -1 | number Duration time of the animation (ms), set -1 for an infinite animation. |
ariaLabel | '' | string Descriptive label for the content. |
listItemOption | null | object|boolean Set this prop to have the skeleton render as a list item with an avatar and wrapping text.
Set only one option prop at a time. |
offset | 1 | number RippleDuration controls how long the delay is for the animation of a
placeholder 1000 pixels from the top of the page. Each placeholder
from the top down will have a delay duration from 0 to this offset.
The delay of each placeholder animation is based on how far down the page
the placeholder is rendered. This is a linear relationship. The unit
is milliseconds. |
paragraphOption | null | object|boolean Set this prop to have the skeleton render as multiple lines of text.
Set only one option prop at a time. |
shapeOption | null | object|boolean Set this prop to have the skeleton render as a specific shape.
Set only one option prop at a time. |
textOption | null | object Set this prop to have the skeleton render as a single line of text.
Set only one option prop at a time. |
Skeleton documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope