The Changelog

What's new around here?

Succinct and informative updates about Flux.
November 26, 2025

Skeleton

Version ^2.9.0
Skeleton loading placeholder with shimmer animation
Loading states matter. A well-designed skeleton keeps users engaged while content loads, making your app feel faster and more polished.
Introducing Skeleton, a flexible component for creating placeholder content.
Copy to clipboard
<flux:skeleton.group animate="shimmer" class="flex items-center gap-4">    <flux:skeleton class="size-10 rounded-full" />    <div class="flex-1">        <flux:skeleton.line />        <flux:skeleton.line class="w-1/2" />    </div></flux:skeleton.group>

Text placeholders

Skeleton lines mimicking paragraph text
The skeleton.line component mimics real text—it occupies the full line-height but renders a slimmer bar, giving it the natural proportions of actual text:
Copy to clipboard
<flux:skeleton.group>    <flux:skeleton.line class="mb-2 w-1/4" />    <flux:skeleton.line />    <flux:skeleton.line />    <flux:skeleton.line class="w-3/4" /></flux:skeleton.group>

Animation options

Skeleton showing shimmer and pulse animations
Choose between shimmer and pulse animations, or go with no animation at all. The skeleton.group component lets you set the animation once and have all child skeletons inherit it:
Copy to clipboard
<!-- Shimmer animation --><flux:skeleton.group animate="shimmer">    <flux:skeleton.line /></flux:skeleton.group><!-- Pulse animation --><flux:skeleton.group animate="pulse">    <flux:skeleton.line /></flux:skeleton.group><!-- No animation --><flux:skeleton.line />

Real-world examples

Skeleton loading state for a data table
Build skeleton states for anything—tables, cards, charts, profiles. Here's a table loading state:
Copy to clipboard
<flux:skeleton.group animate="shimmer">    <flux:table>        <flux:table.columns>            <flux:table.column>Customer</flux:table.column>            <flux:table.column>Date</flux:table.column>            <flux:table.column>Status</flux:table.column>        </flux:table.columns>        <flux:table.rows>            @foreach (range(1, 5) as $i)                <flux:table.row>                    <flux:table.cell>                        <div class="flex items-center gap-2">                            <flux:skeleton class="rounded-full size-5" />                            <flux:skeleton.line />                        </div>                    </flux:table.cell>                    <flux:table.cell>                        <flux:skeleton.line />                    </flux:table.cell>                    <flux:table.cell>                        <flux:skeleton.line />                    </flux:table.cell>                </flux:table.row>            @endforeach        </flux:table.rows>    </flux:table></flux:skeleton.group>

Check out the Skeleton documentation for more examples and the full API reference.
Copyright © 2025 Wireable LLC ·Terms of Service
Built with by
Caleb Porzio and Hugo Sainte-Marie