Extended Module
Loading
Skeleton screens, spinners, and progress indicators. Production-ready loading states with automatic dark mode and no JS required.
gleam-loading.css
spinners + skeletons
auto dark mode
<!-- Skeleton text lines -->
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text" style="width:70%"></div>
<!-- Spinner -->
<div class="loader-spinner"></div>
<!-- Pulse dots -->
<div class="loader-dots">
<span></span><span></span><span></span>
</div>Spinners
loader-spinner
large
small
loader-dots
Skeleton Screens
Card skeleton
Profile skeleton
Show/Hide Skeletons with JS
Replace skeleton with content using entrance animations for a polished transition.
<!-- Loading state -->
<div id="card">
<div class="skeleton skeleton-rect"></div>
</div>
// Swap to real content with entrance
const card = document.getElementById('card');
card.innerHTML = realContent;
gleam.animate(card, 'entrance-fade-up');