grassroot
Install

Docs Components Primitives

DotMatrixLoader

React example follows below.
ts
const dotMatrixLoaderFixture = {
  id: "dot-matrix-loader",
  variants: [
    {
      variant: "signal-weave",
      size: "sm",
      speed: 1,
      label: "Loading signals",
      paused: false,
    },
    {
      variant: "core-breath",
      size: "md",
      speed: 0.8,
      label: "Resolving core",
      paused: false,
    },
    {
      variant: "relay-loop",
      size: "lg",
      speed: 1.2,
      label: "Relaying updates",
      paused: false,
    },
    {
      variant: "split-beat",
      size: "sm",
      speed: 1.4,
      label: "Synchronizing",
      paused: false,
    },
    {
      variant: "pixel-rain",
      size: "md",
      speed: 0.7,
      label: "Fetching pixels",
      paused: false,
    },
    {
      variant: "quiet-static",
      size: "lg",
      speed: 1,
      label: "Preview paused",
      paused: true,
    },
    {
      variant: "diagonal-scan",
      size: "sm",
      speed: 1.1,
      label: "Scanning diagonally",
      paused: false,
    },
    {
      variant: "radar-sweep",
      size: "md",
      speed: 0.9,
      label: "Sweeping radar",
      paused: false,
    },
    {
      variant: "cross-pulse",
      size: "lg",
      speed: 1.2,
      label: "Pulsing connection",
      paused: false,
    },
    {
      variant: "corner-chase",
      size: "sm",
      speed: 1.3,
      label: "Checking corners",
      paused: false,
    },
    {
      variant: "row-shift",
      size: "md",
      speed: 1,
      label: "Shifting rows",
      paused: false,
    },
    {
      variant: "orbit-collapse",
      size: "lg",
      speed: 0.8,
      label: "Collapsing orbit",
      paused: false,
    },
    {
      variant: "helix-twist",
      size: "sm",
      speed: 1.1,
      label: "Twisting helix",
      paused: false,
    },
    {
      variant: "prism-burst",
      size: "md",
      speed: 0.9,
      label: "Refracting prism",
      paused: false,
    },
    {
      variant: "comet-trail",
      size: "lg",
      speed: 1.2,
      label: "Tracking comet",
      paused: false,
    },
    {
      variant: "wave-fold",
      size: "sm",
      speed: 1.3,
      label: "Folding wave",
      paused: false,
    },
    {
      variant: "portal-ring",
      size: "md",
      speed: 1,
      label: "Opening portal",
      paused: false,
    },
    {
      variant: "star-flare",
      size: "lg",
      speed: 0.8,
      label: "Flaring star",
      paused: false,
    },
  ],
} as const;
 
import { DotMatrixLoader } from "@grassroot/ui-react";
 
export default function DotMatrixLoaderDemo() {
  return (
    <div aria-hidden="true" className="vs-dmx-list">
      {dotMatrixLoaderFixture.variants.map((entry) => (
        <figure key={entry.variant} className="vs-dmx-preview">
          <DotMatrixLoader
            variant={entry.variant}
            size={entry.size}
            speed={entry.speed}
            label={entry.label}
            paused={entry.paused}
          />
          <figcaption className="vs-dmx-preview__label">{entry.variant}</figcaption>
        </figure>
      ))}
    </div>
  );
}
ts
<script setup lang="ts">
const dotMatrixLoaderFixture = {
  id: "dot-matrix-loader",
  variants: [
    {
      variant: "signal-weave",
      size: "sm",
      speed: 1,
      label: "Loading signals",
      paused: false,
    },
    {
      variant: "core-breath",
      size: "md",
      speed: 0.8,
      label: "Resolving core",
      paused: false,
    },
    {
      variant: "relay-loop",
      size: "lg",
      speed: 1.2,
      label: "Relaying updates",
      paused: false,
    },
    {
      variant: "split-beat",
      size: "sm",
      speed: 1.4,
      label: "Synchronizing",
      paused: false,
    },
    {
      variant: "pixel-rain",
      size: "md",
      speed: 0.7,
      label: "Fetching pixels",
      paused: false,
    },
    {
      variant: "quiet-static",
      size: "lg",
      speed: 1,
      label: "Preview paused",
      paused: true,
    },
    {
      variant: "diagonal-scan",
      size: "sm",
      speed: 1.1,
      label: "Scanning diagonally",
      paused: false,
    },
    {
      variant: "radar-sweep",
      size: "md",
      speed: 0.9,
      label: "Sweeping radar",
      paused: false,
    },
    {
      variant: "cross-pulse",
      size: "lg",
      speed: 1.2,
      label: "Pulsing connection",
      paused: false,
    },
    {
      variant: "corner-chase",
      size: "sm",
      speed: 1.3,
      label: "Checking corners",
      paused: false,
    },
    {
      variant: "row-shift",
      size: "md",
      speed: 1,
      label: "Shifting rows",
      paused: false,
    },
    {
      variant: "orbit-collapse",
      size: "lg",
      speed: 0.8,
      label: "Collapsing orbit",
      paused: false,
    },
    {
      variant: "helix-twist",
      size: "sm",
      speed: 1.1,
      label: "Twisting helix",
      paused: false,
    },
    {
      variant: "prism-burst",
      size: "md",
      speed: 0.9,
      label: "Refracting prism",
      paused: false,
    },
    {
      variant: "comet-trail",
      size: "lg",
      speed: 1.2,
      label: "Tracking comet",
      paused: false,
    },
    {
      variant: "wave-fold",
      size: "sm",
      speed: 1.3,
      label: "Folding wave",
      paused: false,
    },
    {
      variant: "portal-ring",
      size: "md",
      speed: 1,
      label: "Opening portal",
      paused: false,
    },
    {
      variant: "star-flare",
      size: "lg",
      speed: 0.8,
      label: "Flaring star",
      paused: false,
    },
  ],
} as const;
 
import { DotMatrixLoader } from "@grassroot/ui-vue";
</script>
 
<template>
  <div aria-hidden="true" class="vs-dmx-list">
    <figure
      v-for="entry in dotMatrixLoaderFixture.variants"
      :key="entry.variant"
      class="vs-dmx-preview"
    >
      <DotMatrixLoader
        :variant="entry.variant"
        :size="entry.size"
        :speed="entry.speed"
        :label="entry.label"
        :paused="entry.paused"
      />
      <figcaption class="vs-dmx-preview__label">{{ entry.variant }}</figcaption>
    </figure>
  </div>
</template>
ts
import { Component } from "@angular/core";
const dotMatrixLoaderFixture = {
  id: "dot-matrix-loader",
  variants: [
    {
      variant: "signal-weave",
      size: "sm",
      speed: 1,
      label: "Loading signals",
      paused: false,
    },
    {
      variant: "core-breath",
      size: "md",
      speed: 0.8,
      label: "Resolving core",
      paused: false,
    },
    {
      variant: "relay-loop",
      size: "lg",
      speed: 1.2,
      label: "Relaying updates",
      paused: false,
    },
    {
      variant: "split-beat",
      size: "sm",
      speed: 1.4,
      label: "Synchronizing",
      paused: false,
    },
    {
      variant: "pixel-rain",
      size: "md",
      speed: 0.7,
      label: "Fetching pixels",
      paused: false,
    },
    {
      variant: "quiet-static",
      size: "lg",
      speed: 1,
      label: "Preview paused",
      paused: true,
    },
    {
      variant: "diagonal-scan",
      size: "sm",
      speed: 1.1,
      label: "Scanning diagonally",
      paused: false,
    },
    {
      variant: "radar-sweep",
      size: "md",
      speed: 0.9,
      label: "Sweeping radar",
      paused: false,
    },
    {
      variant: "cross-pulse",
      size: "lg",
      speed: 1.2,
      label: "Pulsing connection",
      paused: false,
    },
    {
      variant: "corner-chase",
      size: "sm",
      speed: 1.3,
      label: "Checking corners",
      paused: false,
    },
    {
      variant: "row-shift",
      size: "md",
      speed: 1,
      label: "Shifting rows",
      paused: false,
    },
    {
      variant: "orbit-collapse",
      size: "lg",
      speed: 0.8,
      label: "Collapsing orbit",
      paused: false,
    },
    {
      variant: "helix-twist",
      size: "sm",
      speed: 1.1,
      label: "Twisting helix",
      paused: false,
    },
    {
      variant: "prism-burst",
      size: "md",
      speed: 0.9,
      label: "Refracting prism",
      paused: false,
    },
    {
      variant: "comet-trail",
      size: "lg",
      speed: 1.2,
      label: "Tracking comet",
      paused: false,
    },
    {
      variant: "wave-fold",
      size: "sm",
      speed: 1.3,
      label: "Folding wave",
      paused: false,
    },
    {
      variant: "portal-ring",
      size: "md",
      speed: 1,
      label: "Opening portal",
      paused: false,
    },
    {
      variant: "star-flare",
      size: "lg",
      speed: 0.8,
      label: "Flaring star",
      paused: false,
    },
  ],
} as const;
 
import { GrassrootDotMatrixLoader } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-dot-matrix-loader-demo",
  standalone: true,
  imports: [GrassrootDotMatrixLoader],
  host: { style: "display: contents" },
  template: `
    <div aria-hidden="true" class="vs-dmx-list">
      @for (entry of variants; track entry.variant) {
        <figure class="vs-dmx-preview">
          <grassroot-dot-matrix-loader
            [variant]="entry.variant"
            [size]="entry.size"
            [speed]="entry.speed"
            [label]="entry.label"
            [paused]="entry.paused"
          />
          <figcaption class="vs-dmx-preview__label">{{ entry.variant }}</figcaption>
        </figure>
      }
    </div>
  `,
})
export class DotMatrixLoaderDemoComponent {
  protected readonly variants = dotMatrixLoaderFixture.variants;
}
 
export default DotMatrixLoaderDemoComponent;
ts
<script lang="ts">
  const dotMatrixLoaderFixture = {
    id: "dot-matrix-loader",
    variants: [
      {
        variant: "signal-weave",
        size: "sm",
        speed: 1,
        label: "Loading signals",
        paused: false,
      },
      {
        variant: "core-breath",
        size: "md",
        speed: 0.8,
        label: "Resolving core",
        paused: false,
      },
      {
        variant: "relay-loop",
        size: "lg",
        speed: 1.2,
        label: "Relaying updates",
        paused: false,
      },
      {
        variant: "split-beat",
        size: "sm",
        speed: 1.4,
        label: "Synchronizing",
        paused: false,
      },
      {
        variant: "pixel-rain",
        size: "md",
        speed: 0.7,
        label: "Fetching pixels",
        paused: false,
      },
      {
        variant: "quiet-static",
        size: "lg",
        speed: 1,
        label: "Preview paused",
        paused: true,
      },
      {
        variant: "diagonal-scan",
        size: "sm",
        speed: 1.1,
        label: "Scanning diagonally",
        paused: false,
      },
      {
        variant: "radar-sweep",
        size: "md",
        speed: 0.9,
        label: "Sweeping radar",
        paused: false,
      },
      {
        variant: "cross-pulse",
        size: "lg",
        speed: 1.2,
        label: "Pulsing connection",
        paused: false,
      },
      {
        variant: "corner-chase",
        size: "sm",
        speed: 1.3,
        label: "Checking corners",
        paused: false,
      },
      {
        variant: "row-shift",
        size: "md",
        speed: 1,
        label: "Shifting rows",
        paused: false,
      },
      {
        variant: "orbit-collapse",
        size: "lg",
        speed: 0.8,
        label: "Collapsing orbit",
        paused: false,
      },
      {
        variant: "helix-twist",
        size: "sm",
        speed: 1.1,
        label: "Twisting helix",
        paused: false,
      },
      {
        variant: "prism-burst",
        size: "md",
        speed: 0.9,
        label: "Refracting prism",
        paused: false,
      },
      {
        variant: "comet-trail",
        size: "lg",
        speed: 1.2,
        label: "Tracking comet",
        paused: false,
      },
      {
        variant: "wave-fold",
        size: "sm",
        speed: 1.3,
        label: "Folding wave",
        paused: false,
      },
      {
        variant: "portal-ring",
        size: "md",
        speed: 1,
        label: "Opening portal",
        paused: false,
      },
      {
        variant: "star-flare",
        size: "lg",
        speed: 0.8,
        label: "Flaring star",
        paused: false,
      },
    ],
  } as const;
 
  import { DotMatrixLoader } from "@grassroot/ui-svelte";
</script>
 
<div aria-hidden="true" class="vs-dmx-list">
  {#each dotMatrixLoaderFixture.variants as entry (entry.variant)}
    <figure class="vs-dmx-preview">
      <DotMatrixLoader
        variant={entry.variant}
        size={entry.size}
        speed={entry.speed}
        label={entry.label}
        paused={entry.paused}
      />
      <figcaption class="vs-dmx-preview__label">{entry.variant}</figcaption>
    </figure>
  {/each}
</div>
ts
/** @jsxImportSource solid-js */
import { For } from "solid-js";
const dotMatrixLoaderFixture = {
  id: "dot-matrix-loader",
  variants: [
    {
      variant: "signal-weave",
      size: "sm",
      speed: 1,
      label: "Loading signals",
      paused: false,
    },
    {
      variant: "core-breath",
      size: "md",
      speed: 0.8,
      label: "Resolving core",
      paused: false,
    },
    {
      variant: "relay-loop",
      size: "lg",
      speed: 1.2,
      label: "Relaying updates",
      paused: false,
    },
    {
      variant: "split-beat",
      size: "sm",
      speed: 1.4,
      label: "Synchronizing",
      paused: false,
    },
    {
      variant: "pixel-rain",
      size: "md",
      speed: 0.7,
      label: "Fetching pixels",
      paused: false,
    },
    {
      variant: "quiet-static",
      size: "lg",
      speed: 1,
      label: "Preview paused",
      paused: true,
    },
    {
      variant: "diagonal-scan",
      size: "sm",
      speed: 1.1,
      label: "Scanning diagonally",
      paused: false,
    },
    {
      variant: "radar-sweep",
      size: "md",
      speed: 0.9,
      label: "Sweeping radar",
      paused: false,
    },
    {
      variant: "cross-pulse",
      size: "lg",
      speed: 1.2,
      label: "Pulsing connection",
      paused: false,
    },
    {
      variant: "corner-chase",
      size: "sm",
      speed: 1.3,
      label: "Checking corners",
      paused: false,
    },
    {
      variant: "row-shift",
      size: "md",
      speed: 1,
      label: "Shifting rows",
      paused: false,
    },
    {
      variant: "orbit-collapse",
      size: "lg",
      speed: 0.8,
      label: "Collapsing orbit",
      paused: false,
    },
    {
      variant: "helix-twist",
      size: "sm",
      speed: 1.1,
      label: "Twisting helix",
      paused: false,
    },
    {
      variant: "prism-burst",
      size: "md",
      speed: 0.9,
      label: "Refracting prism",
      paused: false,
    },
    {
      variant: "comet-trail",
      size: "lg",
      speed: 1.2,
      label: "Tracking comet",
      paused: false,
    },
    {
      variant: "wave-fold",
      size: "sm",
      speed: 1.3,
      label: "Folding wave",
      paused: false,
    },
    {
      variant: "portal-ring",
      size: "md",
      speed: 1,
      label: "Opening portal",
      paused: false,
    },
    {
      variant: "star-flare",
      size: "lg",
      speed: 0.8,
      label: "Flaring star",
      paused: false,
    },
  ],
} as const;
 
import { DotMatrixLoader } from "@grassroot/ui-solid";
 
export default function DotMatrixLoaderDemo() {
  return (
    <div aria-hidden="true" class="vs-dmx-list">
      <For each={dotMatrixLoaderFixture.variants}>
        {(entry) => (
          <figure class="vs-dmx-preview">
            <DotMatrixLoader
              variant={entry.variant}
              size={entry.size}
              speed={entry.speed}
              label={entry.label}
              paused={entry.paused}
            />
            <figcaption class="vs-dmx-preview__label">{entry.variant}</figcaption>
          </figure>
        )}
      </For>
    </div>
  );
}

Installation

API Reference

Import

import { DotMatrixLoader } from "@grassroot/ui-react";

Props

Prop
Type
Default
Requirement
Description
variant
"signal-weave" | "core-breath" | "relay-loop" | "split-beat" | "pixel-rain" | "quiet-static" | "diagonal-scan" | "radar-sweep" | "cross-pulse" | "corner-chase" | "row-shift" | "orbit-collapse" | "helix-twist" | "prism-burst" | "comet-trail" | "wave-fold" | "portal-ring" | "star-flare" | undefined
"signal-weave"
optional
Animation pattern.
size
"sm" | "md" | "lg" | undefined
"md"
optional
Overall scale.
speed
number | undefined
1
optional
Animation speed multiplier.
label
string | undefined
"Loading"
optional
Accessible label for assistive tech.
paused
boolean | undefined
false
optional
Freeze the loader on its current frame.
Prop
variant
Type
"signal-weave" | "core-breath" | "relay-loop" | "split-beat" | "pixel-rain" | "quiet-static" | "diagonal-scan" | "radar-sweep" | "cross-pulse" | "corner-chase" | "row-shift" | "orbit-collapse" | "helix-twist" | "prism-burst" | "comet-trail" | "wave-fold" | "portal-ring" | "star-flare" | undefined
Default
"signal-weave"
Requirement
optional
Description
Animation pattern.
Prop
size
Type
"sm" | "md" | "lg" | undefined
Default
"md"
Requirement
optional
Description
Overall scale.
Prop
speed
Type
number | undefined
Default
1
Requirement
optional
Description
Animation speed multiplier.
Prop
label
Type
string | undefined
Default
"Loading"
Requirement
optional
Description
Accessible label for assistive tech.
Prop
paused
Type
boolean | undefined
Default
false
Requirement
optional
Description
Freeze the loader on its current frame.

Native attributes

Standard DOM and ARIA attributes not listed above spread onto the root element.

Import

import { DotMatrixLoader } from "@grassroot/ui-vue";

Props

Prop
Type
Default
Requirement
variant
"signal-weave" | "core-breath" | "relay-loop" | "split-beat" | "pixel-rain" | "quiet-static" | "diagonal-scan" | "radar-sweep" | "cross-pulse" | "corner-chase" | "row-shift" | "orbit-collapse" | "helix-twist" | "prism-burst" | "comet-trail" | "wave-fold" | "portal-ring" | "star-flare" | undefined
"signal-weave"
optional
size
"sm" | "md" | "lg" | undefined
"md"
optional
speed
number | undefined
—
optional
label
string | undefined
"Loading"
optional
paused
boolean | undefined
false
optional
Prop
variant
Type
"signal-weave" | "core-breath" | "relay-loop" | "split-beat" | "pixel-rain" | "quiet-static" | "diagonal-scan" | "radar-sweep" | "cross-pulse" | "corner-chase" | "row-shift" | "orbit-collapse" | "helix-twist" | "prism-burst" | "comet-trail" | "wave-fold" | "portal-ring" | "star-flare" | undefined
Default
"signal-weave"
Requirement
optional
Prop
size
Type
"sm" | "md" | "lg" | undefined
Default
"md"
Requirement
optional
Prop
speed
Type
number | undefined
Default
—
Requirement
optional
Prop
label
Type
string | undefined
Default
"Loading"
Requirement
optional
Prop
paused
Type
boolean | undefined
Default
false
Requirement
optional

Import

import { Component } from "@angular/core";
import { GrassrootDotMatrixLoader } from "@grassroot/ui-angular";

Props

Prop
Type
Default
Requirement
variant
DotMatrixLoaderVariant
"signal-weave"
optional
size
"sm" | "md" | "lg"
"md"
optional
speed
number
—
optional
label
string
"Loading"
optional
paused
boolean
false
optional
Prop
variant
Type
DotMatrixLoaderVariant
Default
"signal-weave"
Requirement
optional
Prop
size
Type
"sm" | "md" | "lg"
Default
"md"
Requirement
optional
Prop
speed
Type
number
Default
—
Requirement
optional
Prop
label
Type
string
Default
"Loading"
Requirement
optional
Prop
paused
Type
boolean
Default
false
Requirement
optional

Import

import { DotMatrixLoader } from "@grassroot/ui-svelte";

Props

Prop
Type
Default
Requirement
variant
DotMatrixLoaderVariant
"signal-weave"
optional
size
"sm" | "md" | "lg"
"md"
optional
speed
number
—
optional
label
string
"Loading"
optional
paused
boolean
false
optional
Prop
variant
Type
DotMatrixLoaderVariant
Default
"signal-weave"
Requirement
optional
Prop
size
Type
"sm" | "md" | "lg"
Default
"md"
Requirement
optional
Prop
speed
Type
number
Default
—
Requirement
optional
Prop
label
Type
string
Default
"Loading"
Requirement
optional
Prop
paused
Type
boolean
Default
false
Requirement
optional

Import

import { For } from "solid-js";
import { DotMatrixLoader } from "@grassroot/ui-solid";

Props

Prop
Type
Default
Requirement
variant
DotMatrixLoaderVariant
—
optional
size
"sm" | "md" | "lg"
—
optional
speed
number
—
optional
label
string
—
optional
paused
boolean
—
optional
Prop
variant
Type
DotMatrixLoaderVariant
Default
—
Requirement
optional
Prop
size
Type
"sm" | "md" | "lg"
Default
—
Requirement
optional
Prop
speed
Type
number
Default
—
Requirement
optional
Prop
label
Type
string
Default
—
Requirement
optional
Prop
paused
Type
boolean
Default
—
Requirement
optional

Native attributes

Standard DOM and ARIA attributes not listed above spread onto the root element.