Loaders - Lumora

Living Documentation

Loaders for waiting states, async actions, and skeleton previews

Use loaders when operations take perceptible time. This page demonstrates practical spinner, pulse-dot, skeleton, and button loading patterns that keep users informed without blocking.

Perceived performance Reduced motion safe Skeleton support Button state demo

Loading State On global demo mode

Visible Loaders 4 active loader instances

Simulated Delay 1.6s button completion timeout

Motion Profile Normal prefers-reduced-motion check

1. Bootstrap Spinner Variants

Border and grow indicators

Default border

Grow spinner

Success tint

Warning tint

2. Loader Rules

Use loaders intentionally

Show loaders only for operations longer than ~300ms.
Pair with clear status text for screen readers.
Use skeletons for layout-preserving data fetches.
Disable actionable controls while pending.
Respect prefers-reduced-motion in custom animations.
Swap loaders for success or error states quickly.

3. Pulse Dot Loader

Compact inline status indicator

Good for chat replies, inline jobs, and card footers.

4. Skeleton Content

Preserve final card shape while loading

5. Button Loading States

Optimistic action with disabled controls

Click any button to preview a loading indicator and disabled state.

6. Production Snippet

Drop-in skeleton + button loading starter

loaders-starter.html

<div class="skeleton-item" aria-hidden="true">
  <div class="skeleton-line w-100"></div>
  <div class="skeleton-line w-80"></div>
  <div class="skeleton-line w-60"></div>
</div>

<button class="btn btn-primary" id="btnSave" type="button">
  <span class="btn-label">Save Changes</span>
</button>

<script>
const btn = document.getElementById("btnSave");
btn.addEventListener("click", () => {
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" aria-hidden="true"></span>Saving...';
  setTimeout(() => {
    btn.disabled = false;
    btn.innerHTML = '<span class="btn-label">Save Changes</span>';
  }, 1600);
});
</script>

7. Full-Screen Loading Overlay

Modal-like backdrop with centered loader for full-page operations

Demo: Click button below to show a full-screen overlay with centered loader

Design Rules

Use for critical, full-page operations (uploads, auth).
Apply semi-transparent backdrop to dim content and prevent interaction.
Center spinner with optional status text for clarity.
Set high z-index to ensure overlay appears above all page elements.
Provide timeout or cancel button to prevent indefinite blocking.
Use aria-busy="true" or similar for screen reader feedback.

overlay-full-screen.html

<div class="overlay-full-screen" id="overlayLoad" aria-busy="true">
  <div class="overlay-full-screen__content">
    <div class="spinner-border overlay-full-screen__spinner" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
    <p class="overlay-full-screen__text">Processing your request</p>
    <p class="overlay-full-screen__subtext">This may take a few moments.</p>
  </div>
</div>

<style>
.overlay-full-screen {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.overlay-full-screen.is-show {
  opacity: 1;
  pointer-events: auto;
}
.overlay-full-screen__content {
  display: grid;
  gap: 12px;
  align-items: center;
  justify-items: center;
  text-align: center;
}
.overlay-full-screen__text {
  color: white;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}
</style>

<script>
const overlay = document.getElementById("overlayLoad");

// Show overlay
function showOverlay() {
  overlay.classList.add("is-show");
}

// Hide overlay
function hideOverlay() {
  overlay.classList.remove("is-show");
}

// Auto-hide after 3 seconds (example)
function showOverlayWithTimeout(durationMs = 3000) {
  showOverlay();
  setTimeout(hideOverlay, durationMs);
}

// Usage:
// showOverlayWithTimeout(2000);
</script>