Patterns · AhaSlides surfaces

Loader

The full-surface branded loading screen shown while a new environment boots — workspace → editor, or editor → presenting.

Examples

Label

The full-surface loading screen · shown while a new environment boots (workspace → editor, editor → presenting)

Five branded tiles cycle with a staggered soft-flow — each fades + slides + unblurs in, holds, then out

<aha-loader> fills its container on a white ground — make the container full-screen for a real environment transition. The five tiles are the shared <aha-illustration> spot art (the loader-* family), called by name — never an inline SVG. It is decorative brand motion, not a progress bar: pass a present-tense label (announced via role="status"), never a percentage. The loop stills under prefers-reduced-motion. For an inline indeterminate wait inside an existing surface, reach for Spin → instead.

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-loader> is the full-surface branded loading SCREEN for an environment transition
     (workspace → editor, editor → presenting). One import registers it (and pulls the shared
     <aha-illustration> spot art it reuses). Make its container full-screen for a real transition. -->
<script type="module">
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-loader.js';   // registers <aha-loader> (+ <aha-illustration>)
</script>

<!-- Fill the viewport while the next environment boots. -->
<div style="position:fixed; inset:0">
  <aha-loader label="Opening the editor…"></aha-loader>
</div>

<!-- Or drop it into any sized box (it fills its container, min-height 240px). -->
<div style="width:100%; height:360px">
  <aha-loader label="Starting the presentation…"></aha-loader>
</div>

import '@ahaslides-product/design/aha-loader';   // registers <aha-loader> (+ the reused <aha-illustration> spot art)

// The full-surface branded loading SCREEN for an environment transition — workspace → editor,
// editor → presenting. It fills its container, so make that container full-screen for a real
// transition. Decorative brand motion, not a progress bar: give it a `label`, never a percentage.
// For an inline indeterminate wait inside an existing surface, reach for <aha-spin> instead.

// Full-screen while the next environment boots.
function EnvironmentTransition({ loading, children }) {
  if (loading) {
    return (
      <div style={{ position: 'fixed', inset: 0 }}>
        <aha-loader label="Opening the editor…" />
      </div>
    );
  }
  return children;
}

// Or inside any sized box (it fills its container, min-height 240px).
<div style={{ width: '100%', height: 360 }}>
  <aha-loader label="Starting the presentation…" />
</div>

// main.ts — register the element + its reused spot art, and mark aha-* as custom elements
import '@ahaslides-product/design/aha-loader';   // registers <aha-loader> (+ the reused <aha-illustration>)
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');

// Component.vue — the full-surface branded loading SCREEN for an environment transition
// (workspace → editor, editor → presenting). It fills its container, so make that container
// full-screen for a real transition. Decorative brand motion, not a progress bar: pass a `label`,
// never a percentage. For an inline indeterminate wait, reach for <aha-spin> instead.
<template>
  <!-- Full-screen while the next environment boots -->
  <div v-if="loading" style="position:fixed; inset:0">
    <aha-loader label="Opening the editor…" />
  </div>

  <!-- Or inside any sized box (it fills its container, min-height 240px) -->
  <div style="width:100%; height:360px">
    <aha-loader label="Starting the presentation…" />
  </div>
</template>

API

Prop	Type	Default	Notes
`label`	string	`Loading`	Accessible name announced by the role=status live region (e.g. "Opening the editor…")

Install

# .npmrc — once: point the @ahaslides-product scope at GitHub Packages
@ahaslides-product:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}   # a GitHub token with read:packages

npm i @ahaslides-product/design
import '@ahaslides-product/design/tokens.css';   // once, at the app root
import '@ahaslides-product/design/aha-loader';   // registers <aha-loader>

Agent feed for this component (absolute, fetchable anywhere): aha-loader.agent.json · aha-loader.md · aha-loader.llms.txt

When to use

Loader — a full-screen environment transition — the user lands in a new surface (workspace → editor, editor → presenting) and waits for it to boot
Spin — an inline, indeterminate wait inside an existing surface — a button, a panel, a section loading in place
Skeleton — the layout of the content being loaded is known — show its shape rather than a spinner

One Loader per transition, filling the whole surface. It is decorative brand motion, not a progress bar — don't pair it with a percentage. Keep the `label` a short present-tense phrase naming the destination ("Opening the editor…").

Surfaces

editor dashboard audience settings

Spec

Ground white full-surface (--aha-white); fills its container, min-height 240px · Tiles five 120×120 rounded tiles (radius-xl 16), each centred, one prominent at a time · Art reused <aha-illustration> spot art at 96px — loader-award · loader-wand · loader-plane · loader-ballot · loader-chart · Motion soft-flow keyframe · 7.5s loop · 1.5s stagger across the five · easing --aha-ease-in-out · Reduced motion prefers-reduced-motion stills the loop and holds one branded tile · Duration override the loop length via the CSS custom property --aha-loader-duration (default 7.5s)