The original four-phase loading-dots sequence.
Preview
Example source could not be loaded: spinner-example. Reload this page to retry.Usage
Spinner is an SVG role="status" with aria-label="Loading" by default; give it the specific loading task as in the example. Scale defaults to 2 and logicalWidth to 26. Optional timeMs fixes a phase for deterministic display. Each phase lasts 300 ms; reduced motion freezes phase zero.
Composition
Use a visible task label alongside the status when a page has multiple loads. Do not continually announce every phase. The retained playground can pause/fix phases; arbitrary viewBox and SVG rescaling fall outside the original loading-dots matrix.
Installation
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import * as React from "react";
import { minecraftLoadingGlyphs } from "./minecraft-loading-glyphs";
import { minecraftClasses as cn, minecraftStyle } from "./minecraft-render";
import "./minecraft-spinner.css";
interface SpinnerScaleStyle extends React.CSSProperties {
"--mc-scale": number;
}Interactive playground
Loading indicator