Skeleton

A placeholder preview of your content before the data gets loaded to reduce load-time frustration.

Install

Run the following command to install the skeleton component:

npx acc-nuxt add Skeleton

The skeleton will adapt to the height of its parent element.

class:string— optional

default:undefined

Custom CSS class to apply to the skeleton element.

variant:pulse | wave— optional

default:pulse

The animation style of the skeleton. Available options: pulse, wave.

inline:boolean— optional

default:false

When true, inherits the height of the parent element. Rendered as <span>.

The skeleton component can be customized using the following CSS variables.

--lev-skeleton-bg

default:rgba(20, 20, 20, 0.1)

Background color of the skeleton.