Skeleton

Reserve the layout of content that is still loading. Match the final width, height, and shape.

Width


        
          1
          
          <Skeleton :width="160" />

Box height

box-height sets the block size. height is the fallback when box-height is omitted.


        
          1
          
          <Skeleton :width="160" :box-height="42" />

Wrapping children

Wrap the real control to inherit its size. show (default true) paints the shimmer; show false reveals the child.


        
          1
          
          <Skeleton>
        

          2
          
            <Button size="small">Hidden by skeleton</Button>
        

          3
          
          </Skeleton>
        

          4
          
          <Skeleton :show="false">
        

          5
          
            <Button size="small">Not hidden by skeleton</Button>
        

          6
          
          </Skeleton>

Fixed size

Lock width and height so the swap does not reflow neighbors when children resolve.


        
          1
          
          <Skeleton width="100%" :height="100" />
        

          2
          
          <Skeleton width="100%" :height="100" :show="false">
        

          3
          
            <Button size="small">Ready</Button>
        

          4
          
          </Skeleton>

Shapes

pill for avatars, default rounded for buttons and chips, squared for image tiles. rounded is accepted and matches the default 6px corner.


        
          1
          
          <Skeleton pill :width="48" :height="48" />
        

          2
          
          <Skeleton rounded :width="48" :height="48" />
        

          3
          
          <Skeleton squared :width="48" :height="48" />

No animation


        
          1
          
          <Skeleton :animated="false" width="100%" :height="100" />

Button

button grows the shimmer by 1px so it covers the control's border.

Without button

With button


        
          1
          
          <Skeleton :width="120" :height="32">
        

          2
          
            <Button size="small">Save</Button>
        

          3
          
          </Skeleton>
        

          4
          
          <Skeleton button :width="120" :height="32">
        

          5
          
            <Button size="small">Save</Button>
        

          6
          
          </Skeleton>

Best practices

Skeleton is for async data that fills a known layout: rows, cards, a profile block. A single in-flight action uses Spinner or Button loading. Known progress uses Progress. No data at all uses Empty State.
Set width and height / box-height to the resolved content. A 200×20 block becoming an 80×16 string reads as a glitch.
Pick pill, default rounded, or squared to mirror the element that will appear.
When wrapping children, keep those dimensions stable and toggle show. Do not mount a different box on reveal.
Mark the loading region aria-busy="true". Announce completion on the destination with aria-live="polite", not on the skeleton. The skeleton itself is decorative.
Turn animation off on low-power surfaces and respect prefers-reduced-motion. Do not leave focusable controls inside a visible skeleton.