Loaders & Skeletons

Use visual indicators to show loading states in your application. Includes rotating loop spinners and modern skeleton placeholder shimmers.

Spinners

Skeleton Shimmer placeholders

<!-- Spinners -->
<div class="spinner spinner-sm"></div>
<div class="spinner"></div>
<div class="spinner spinner-lg"></div>

<!-- Skeleton Card -->
<div class="card" style="max-width: 350px; padding: 15px;">
    <div class="d-flex flex-align-center gap-3 mb-3">
        <span class="skeleton" style="width: 45px; height: 45px; border-radius: 50%;"></span>
        <div style="flex-grow: 1; display: flex; flex-direction: column; gap: 8px;">
            <span class="skeleton" style="width: 70%; height: 12px;"></span>
            <span class="skeleton" style="width: 40%; height: 10px;"></span>
        </div>
    </div>
    <div style="display: flex; flex-direction: column; gap: 8px;">
        <span class="skeleton" style="width: 100%; height: 10px;"></span>
        <span class="skeleton" style="width: 90%; height: 10px;"></span>
    </div>
</div>

Usage Reference & API Options

CSS-only loading classes. Spinners rotate infinitely, and skeletons shimmer automatically.

Class	Type	Description
.spinner	Spinner	Applies standard rotating circular loop spinner.
.spinner-sm / .spinner-lg	Spinner Sizing	Applies compact (sm) or enlarged (lg) dimensions to loaders.
.skeleton	Skeleton Shimmer	Applies gray placeholder block with built-in infinite shimmer animations. Can be shaped using height, width, and border-radius.