Flux

Skeleton ​

A skeleton is an animated placeholder that stands in for content while it is loading. It conveys the rough shape of the upcoming content and reduces the perceived loading time. Compose multiple skeletons to mirror the layout that will replace them. The shimmer animation is automatically replaced by a subtle pulse when the user prefers reduced motion.

TIP

For a static empty state with an icon and a message rather than a loading state, use a Placeholder.

Props

variant?: 'text' | 'circle' | 'rectangle' | 'rounded'
The shape of the skeleton.
Default: text

width?: string | number
The width of the skeleton. A number is treated as pixels.

height?: string | number
The height of the skeleton. A number is treated as pixels.

is?: string
The element or component the skeleton renders as.
Default: div

Examples ​

Basic

A few lines of text being loaded.

<template>
    <Preview>
        <div style="display: flex; flex-direction: column; gap: 10px; width: 320px">
            <FluxSkeleton/>
            <FluxSkeleton/>
            <FluxSkeleton width="70%"/>
        </div>
    </Preview>
</template>

<script
    setup
    lang="ts">
    import { FluxSkeleton } from '@flux-ui/components';
</script>

Variants

All available skeleton shapes.

<template>
    <Preview>
        <div style="display: flex; gap: 24px; align-items: center; flex-wrap: wrap">
            <FluxSkeleton
                variant="circle"
                :width="56"
                :height="56"/>

            <FluxSkeleton
                variant="text"
                :width="120"/>

            <FluxSkeleton
                variant="rectangle"
                :width="120"
                :height="72"/>

            <FluxSkeleton
                variant="rounded"
                :width="120"
                :height="72"/>
        </div>
    </Preview>
</template>

<script
    setup
    lang="ts">
    import { FluxSkeleton } from '@flux-ui/components';
</script>

Card

A skeleton mirroring a media card layout.

<template>
    <Preview>
        <FluxPane style="width: 320px">
            <FluxSkeleton
                variant="rectangle"
                :height="160"/>

            <FluxPaneBody>
                <div style="display: flex; flex-direction: column; gap: 12px">
                    <FluxSkeleton
                        variant="text"
                        width="60%"
                        :height="20"/>

                    <FluxSkeleton/>
                    <FluxSkeleton/>
                    <FluxSkeleton width="40%"/>
                </div>
            </FluxPaneBody>
        </FluxPane>
    </Preview>
</template>

<script
    setup
    lang="ts">
    import { FluxPane, FluxPaneBody, FluxSkeleton } from '@flux-ui/components';
</script>