← Back to home

Ghostly Playground

Interactive demo. Try the animations, see the code.

Loading...

Single component (smooth transition)

<Ghostly loading={isLoading} smooth><UserProfile /></Ghostly>

List with GhostlyList

<GhostlyList loading={isLoading} count={6} item={<ProductCard />}>

Custom colors via props

<Ghostly loading color="hsl(260 60% 88%)" shine="hsl(260 60% 94%)">

Line count control (data-ghostly-lines)

<p data-ghostly-lines="1"> / <p data-ghostly-lines="5">

Exclude elements with data-ghostly-ignore

<button data-ghostly-ignore>Always visible</button>