Grid Loader

A 3×3 grid of glowing squares that cycles a pattern. The pattern is either one of the sixty-odd presets (wave-lr, spiral-cw, heartbeat, border, ripple-out, …) or a 3×3 matrix of 0 | 1 you write yourself — every preset is just a matrix, so anything the presets don't cover is expressible.

Three modes decide how a pattern plays:

• pulse (default) — every active cell breathes together on an infinite loop.
• stagger — active cells light up one after another, left to right, then hold.
• sequence — steps through sequence, one entry per cycle, on a setInterval.

Every active cell also carries a three-layer box-shadow glow scaled to the cell size, which is what gives it the lit-pixel look rather than a flat block.

Usage

<template>
  <div class="flex w-full max-w-md flex-col items-center gap-6">
    <div class="flex h-28 items-center justify-center">
      <MGridLoader
        :pattern="pattern"
        :mode="mode"
        :sequence="['solo-center', 'x-shape', 'diamond', 'border']"
        color="primary"
        size="lg"
        :rounded="rounded"
        :static="frozen"
      />
    </div>

    <div class="grid w-full max-w-sm grid-cols-2 gap-3">
      <USelect
        v-model="pattern"
        :items="patterns"
      />
      <USelect
        v-model="mode"
        :items="['pulse', 'stagger', 'sequence']"
      />
    </div>

    <div class="flex items-center gap-4">
      <UCheckbox
        v-model="rounded"
        label="Round cells"
      />
      <UButton
        :label="frozen ? 'Resume' : 'Freeze'"
        icon="i-lucide-pause"
        size="xs"
        variant="outline"
        @click="frozen = !frozen"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
const pattern = ref('wave-lr')
const mode = ref<'pulse' | 'stagger' | 'sequence'>('pulse')
const rounded = ref(false)
const frozen = ref(false)

const patterns = ['wave-lr', 'spiral-cw', 'heartbeat', 'checkerboard', 'border', 'ripple-out']
</script>

Size is set in pixels and drives the whole grid: the root is size × size, and each cell is (size - gap * 2) / 3. A custom matrix is a plain nested array:

<MGridLoader :pattern="[[1, 0, 1], [0, 1, 0], [1, 0, 1]]" />

The root is an <output> with role="status", so put it where a status message belongs rather than inside a button.

Customize

Props

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.gridLoader in app.config.ts.

Accessibility

The root is an <output aria-label="Loading" role="status">, which is the right semantic for a loader: it is announced politely rather than interrupting, and the cells are decorative divs with no text of their own. The label is hardcoded to "Loading" — there is no prop to change it, so if you need a more specific message, put visible text next to the loader instead of relying on the announcement.

There is no keyboard interaction, which is correct for a non-interactive indicator.

Reduced motion is honoured: onMounted reads (prefers-reduced-motion: reduce) and, when it matches, static behaviour is implied — no Motion components are created and the setInterval is never started. The check runs once on mount and is not watched, so a user changing the setting while the page is open will not see the loader update.

Performance

• Nine cells are rendered per frame regardless of pattern, with keys tl…br — the elements are reused across patterns rather than recreated, so switching patterns animates the existing cells rather than remounting.
• Cell animation is opacity and scale only, both compositor properties. The glow is a static box-shadow on the cell style, not animated.
• stagger mode's delays are a computed over the nine cells, recalculated when the pattern or cycle duration changes.
• sequence mode runs one setInterval started in onMounted and cleared in onBeforeUnmount. Because it is only started on mount, changing mode or sequence after mount does not start or stop it — the interval keeps its original period and pattern list.
• The PATTERNS, COLORS and SIZES lookup tables are exposed on the component instance if you need to reference the preset names from your own code.