Skeletons show placeholder shapes where content will appear once it finishes loading, reducing perceived
wait time and preventing layout shift.
< divclass = " skeleton-overview" > < header> < cs-skeletoneffect = " sheen" > </ cs-skeleton> < cs-skeletoneffect = " sheen" > </ cs-skeleton> </ header> < cs-skeletoneffect = " sheen" > </ cs-skeleton> < cs-skeletoneffect = " sheen" > </ cs-skeleton> < cs-skeletoneffect = " sheen" > </ cs-skeleton> </ div> < style>
.skeleton-overview header {
display : flex;
align-items : center;
margin-bottom : var ( --cs-space-m) ;
}
.skeleton-overview header cs-skeleton:last-child {
flex : 0 0 auto;
width : 30%;
}
.skeleton-overview cs-skeleton {
margin-bottom : var ( --cs-space-m) ;
}
.skeleton-overview cs-skeleton:nth-child(1) {
float : left;
width : 3rem;
height : 3rem;
margin-right : var ( --cs-space-m) ;
vertical-align : middle;
}
.skeleton-overview cs-skeleton:nth-child(3) {
width : 95%;
}
.skeleton-overview cs-skeleton:nth-child(4) {
width : 80%;
}
</ style> Code
A single skeleton stands in for one line or shape. Because layouts vary endlessly, you’ll usually combine several to mirror the content that’s loading. If you reach for the same arrangement often, wrap it in a template that renders the skeletons with your spacing and styles.
Examples
Effect
Set the effect attribute to choose how the skeleton animates while content loads. Effects are intentionally subtle, since motion across many skeletons at once can distract.
Effect Behavior Best for none default Static, non-animated placeholder Dense layouts where motion would be noisy sheenA light sweeps across the indicator Signaling that content is actively loading pulseThe indicator fades in and out A calmer alternative to sheen
< divclass = " skeleton-effects" > < cs-skeletoneffect = " none" > </ cs-skeleton> < cs-skeletoneffect = " sheen" > </ cs-skeleton> < cs-skeletoneffect = " pulse" > </ cs-skeleton> </ div> < style>
.skeleton-effects {
font-size : var ( --cs-font-size-s) ;
}
.skeleton-effects cs-skeleton:not(:first-child) {
margin-top : var ( --cs-space-m) ;
}
</ style> Code
Paragraphs
Stack several skeletons and vary their widths to stand in for a block of text.
< divclass = " skeleton-paragraphs" > < cs-skeleton> </ cs-skeleton> < cs-skeleton> </ cs-skeleton> < cs-skeleton> </ cs-skeleton> < cs-skeleton> </ cs-skeleton> < cs-skeleton> </ cs-skeleton> </ div> < style>
.skeleton-paragraphs cs-skeleton {
margin-bottom : var ( --cs-space-m) ;
}
.skeleton-paragraphs cs-skeleton:nth-child(2) {
width : 95%;
}
.skeleton-paragraphs cs-skeleton:nth-child(4) {
width : 90%;
}
.skeleton-paragraphs cs-skeleton:last-child {
width : 50%;
}
</ style> Code
Avatars
Set a matching width and height to stand in for a circle, square, or rounded avatar.
< divclass = " skeleton-avatars" > < cs-skeleton> </ cs-skeleton> < cs-skeleton> </ cs-skeleton> < cs-skeleton> </ cs-skeleton> </ div> < style>
.skeleton-avatars cs-skeleton {
display : inline-flex;
width : 3rem;
height : 3rem;
margin-right : var ( --cs-space-xs) ;
}
.skeleton-avatars cs-skeleton:nth-child(1)::part(indicator) {
border-radius : 0;
}
.skeleton-avatars cs-skeleton:nth-child(2)::part(indicator) {
border-radius : var ( --cs-border-radius-m) ;
}
</ style> Code
Shapes
Set a border-radius on the indicator part to make circles, squares, and rectangles. For more complex shapes, apply a clip-path to the indicator part. Try Clippy if you need help generating custom shapes.
< divclass = " skeleton-shapes" > < cs-skeletonclass = " square" > </ cs-skeleton> < cs-skeletonclass = " circle" > </ cs-skeleton> < cs-skeletonclass = " triangle" > </ cs-skeleton> < cs-skeletonclass = " cross" > </ cs-skeleton> < cs-skeletonclass = " comment" > </ cs-skeleton> </ div> < style>
.skeleton-shapes cs-skeleton {
display : inline-flex;
width : 50px;
height : 50px;
}
.skeleton-shapes .square::part(indicator) {
border-radius : var ( --cs-border-radius-m) ;
}
.skeleton-shapes .circle::part(indicator) {
border-radius : var ( --cs-border-radius-circle) ;
}
.skeleton-shapes .triangle::part(indicator) {
border-radius : 0;
clip-path : polygon ( 50% 0, 0 100%, 100% 100%) ;
}
.skeleton-shapes .cross::part(indicator) {
border-radius : 0;
clip-path : polygon (
20% 0%,
0% 20%,
30% 50%,
0% 80%,
20% 100%,
50% 70%,
80% 100%,
100% 80%,
70% 50%,
100% 20%,
80% 0%,
50% 30%
) ;
}
.skeleton-shapes .comment::part(indicator) {
border-radius : 0;
clip-path : polygon ( 0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%) ;
}
.skeleton-shapes cs-skeleton:not(:last-child) {
margin-right : var ( --cs-space-xs) ;
}
</ style> Code
Colors
Set the --color and --sheen-color custom properties to tune the skeleton to your surface. --sheen-color is the highlight that sweeps across when effect="sheen".
< cs-skeletoneffect = " sheen" style = " --color : var ( --cs-color-brand-fill-loud) ; --sheen-color : var ( --cs-color-brand-fill-quiet) ; " > </ cs-skeleton> Code
API
Importing
If you're using the autoloader or a hosted project, components load on demand — no manual import
needed. To cherry-pick this component, use one of the following snippets.
npm
Self-Hosted
React
import '@cruglobal/cornerstone-components/components/skeleton/skeleton.js' ;
import './cornerstone/components/skeleton/skeleton.js' ;
import CsSkeleton from '@cruglobal/cornerstone-components/react/skeleton/index.js' ;
Attributes & Properties
Learn more about attributes and properties .
Property Attribute Description Type Default Reflects effecteffectDetermines which effect the skeleton will use. 'pulse' | 'sheen' | 'none''none'Yes
CSS Custom Properties
Learn more about CSS custom properties .
Name Description Default --colorThe color of the skeleton. — --sheen-colorThe sheen color when the skeleton is in its loading state. —
CSS Parts
Learn more about CSS parts .
Name Description CSS selector indicatorThe skeleton's indicator which is responsible for its color and animation. ::part(indicator)
