Pulse Rings
icon-01
Concentric dots expand from center.
Animated 5x5 SVG loaders for agent states, queues, retrieval, and product UI. Copy SVG or install the React bundle.
84 visible / 84 total
Click a tile to copy SVG. Press c when a tile is focused.
icon-01
Concentric dots expand from center.
icon-02
Perimeter dots run around the square.
icon-03
A spiral moves into the center.
icon-04
A crescent path rotates around the grid.
icon-05
Four directional arms rotating around a fixed center.
icon-06
A sweep line crossing a circular dot field.
icon-07
A cross-shaped loader that expands through the center.
icon-08
A diamond path chases around the grid.
icon-09
A square frame pulses in place.
icon-10
A compact ring for small slots.
icon-11
A center anchor with satellites pulsing around it.
icon-12
Cardinal points alternate through center.
icon-13
An offset coil loops through the matrix.
icon-14
Shutter dots rotate around the center.
icon-15
Four corners pulse around a center dot.
icon-16
An hourglass path narrows at center.
icon-17
A ring with an off-center beat.
icon-18
Center core with a rotating shell.
icon-19
Two arcs chasing each other across the matrix.
icon-20
Low-contrast spinner for background slots.
icon-21
A diagonal drift across the 5x5 field.
icon-22
Two outer arcs chasing in opposite corners.
icon-23
A single blade rotating around the center.
icon-24
Outer-ring motion with a center crossover.
icon-25
A vertical column scans left to right.
icon-26
A horizontal rail moves across center.
icon-27
Uneven bars pulse through the grid.
icon-28
A block meter fills left to right.
icon-29
A diagonal sweep for parsing work.
icon-30
The same sweep in reverse.
icon-31
Three lanes advance as a queue.
icon-32
Stepped progress climbing across the matrix.
icon-33
A down arrow for fetch states.
icon-34
An up arrow for publish states.
icon-35
Mirrored lanes sync across the grid.
icon-36
A trace moves through the output path.
icon-37
Blocks advance through ingestion.
icon-38
Alternating dots for token output.
icon-39
Layers move like a build pipeline.
icon-40
Comb columns for indexing work.
icon-41
Two paths converging into a central lane.
icon-42
A central lane branching into two outputs.
icon-43
Queued work advances one cell at a time.
icon-44
A checkmark draws across the grid.
icon-45
A stepped route that climbs through the grid.
icon-46
Alternating columns for sync and transfer states.
icon-47
A scanline that moves down the matrix.
icon-48
Equalizer bars for live or streaming states.
icon-49
Sparse points twinkle across the field.
icon-50
Vertical drops fall through the grid.
icon-51
A center pulse for live states.
icon-52
Scattered points form a loose map.
icon-53
Irregular dots flicker as background work.
icon-54
The full matrix pulses together.
icon-55
A wave crosses the center row.
icon-56
Center glow for thinking states.
icon-57
Broadcast rings move from center.
icon-58
Alternating nodes form a mesh.
icon-59
A clustered cloud shifts around center.
icon-60
Sparse dots caught in a sweep.
icon-61
A three-beat typing indicator in matrix form.
icon-62
Center pulse for voice or chat.
icon-63
Two corners and center stay low.
icon-64
Dots rise into an activation pulse.
icon-65
Target dots frame the center.
icon-66
Dim corners with a small center pulse.
icon-67
An ambient pulse traveling along a single rail.
icon-68
Sparse points for background loading.
icon-69
A symmetric bloom from center to edge.
icon-70
Two strands crossing through the center.
icon-71
A hollow ring with a drifting edge.
icon-72
Crossed dots with a soft center pulse.
icon-73
Reasoning dots pulse around center.
icon-74
Bracketed dots mark an external call.
icon-75
Stacked lanes for memory writes.
icon-76
Crosshair dots scan for retrieval.
icon-77
Two rails passing control between agents.
icon-78
Distributed nodes pulse as a mesh.
icon-79
Checkmark dots for a verified state.
icon-80
A hard stop marker for blocked runs.
icon-81
Queue dots for pending work.
icon-82
Directional dots for active jobs.
icon-83
Broken signal dots for warnings.
icon-84
A filled mark for finished runs.
Dot Matrix is a local UI bundle. Install it once, import the CSS, then use the icons where a job is actually pending.
Use SVG when you need a portable asset.
Use React when the state, tint, or speed should come from your app.
Keep one moving indicator per region. Pair motion with a real label.
npx agentmag add tool dotmatrix-iconsimport "@/components/dotmatrix/dotmatrix.css"1. Pick an icon.
2. Tune tint, speed, and pause state.
3. Click the tile to copy SVG.
4. Paste it inline or save it as an asset.import { DotMatrixIcon } from "@/components/dotmatrix"
export function SaveButton({ saving }: { saving: boolean }) {
return (
<button type="button" disabled={saving} className="inline-flex items-center gap-2">
{saving ? <DotMatrixIcon pattern="radar-sweep" size={18} aria-label="Saving" /> : null}
<span>{saving ? "Saving" : "Save"}</span>
</button>
)
}