Progress & loading

Spinner & skeleton

The spinner inherits currentColor, so it is the right colour inside a primary button and inside a neutral panel without being told.

Code

<GdSpinner :size="14" />
<GdSpinner :size="20" label="Loading parcels" />
<GdButton variant="primary" loading loading-label="Working…">Save</GdButton>

Skeleton — a parcel panel loading

Code

<GdSkeleton width="62%" height="15px" />
<GdSkeleton width="38%" />
<GdSkeleton block height="44px" />
<GdSkeleton width="80%" />

Progress

Determinate only. The value is clamped against max before it is painted.

Code

<GdProgress :value="64" label="Uploading RP80432.pdf" />
<GdProgress :value="100" tone="success" label="Upload complete" />

Avatar, kbd & code

Avatar

Initials only — there is no image slot. They are derived from the name, so they cannot disagree with the label beside them. Sizes 24 / 30 / 38; the solid fill is the organisation's.

Code

<GdAvatar name="Jordan Teal" :size="24" />
<GdAvatar name="Jordan Teal" />
<GdAvatar name="Jordan Teal" :size="38" />
<GdAvatar name="Riverton Certifiers" :size="38" tone="org" />
<GdAvatarGroup :names="['Jordan Teal', 'Priya Nair', 'Sam Okafor', 'Lee Park', 'Ana Cruz']" />

Kbd & code

⌘ K search anywhereEsc close panelL14 RP80432lot_plan

Code

<GdKbd>⌘</GdKbd> <GdKbd>K</GdKbd>
<GdCode>L14 RP80432</GdCode>
<GdCode tinted>lot_plan</GdCode>

API

GdSpinner

Props

PropTypeDefault

sizenumber | string14

The ring's diameter. It inherits `currentColor`, so it takes the right colour inside a primary button and inside a neutral panel without being told.

labelstring—

Announced to assistive tech. Set it when the spinner is alone on screen.

GdSkeleton

Props

PropTypeDefault

widthstring"100%"

Any CSS length or percentage. Match the real content's measure, not a round number.

heightstring"11px"

The default is a line of text. A block needs its real height passed.

circlebooleanfalse

A circle, for an avatar placeholder.

blockbooleanfalse

The heavier step, for a block rather than a line of text.

GdProgress

Props

PropTypeDefault

valuerequirednumber—

How far along. Clamped against `max` before it is painted, so a fetch that reports 103% does not run past the track.

maxnumber100

The total. `value / max` is the proportion.

tone"success" | "info" | "caution" | "danger" | "accent""accent"

The fill's colour. `success` for a finished upload; the rest of the status ladder is available and rarely wanted.

labelstring—

What is progressing — "Uploading RP80432.pdf". `role="progressbar"` and the three aria-value attributes make the percentage audible; a bare div announces nothing.

GdAvatar

Props

PropTypeDefault

namerequiredstring—

The person or organisation. The initials are DERIVED from it — first letter of the first word, first letter of the last; one word gives one letter.

size24 | 30 | 38 | number30

The design's three sizes. The union admits a bare number for the rare host that sets its own.

tone"person" | "org""person"

`person` is the accent wash with indigo initials; `org` is the solid indigo fill, reserved for the organisation or account.

GdAvatarGroup

Props

PropTypeDefault

namesrequiredstring[]—

Everyone in the group, in order. The full list becomes the accessible name.

size24 | 30 | 38 | number30

Passed through to each avatar.

capnumber3

How many faces are drawn before the rest become a count. The overlap is 8px with a 2px surface ring.

GdKbd

Slots

default

The key. Renders a real kbd element rather than a styled span — the whole API.

GdCode

Props

PropTypeDefault

tintedbooleanfalse

A tinted box behind the identifier. Off by default — the typeface is already the signal.

Slots

default

The machine fact — a lot/plan, a token name, an endpoint, a hex.

Usage Guidelines

Use GdSpinner when the action is under a second AND has no known shape — a save, a sign-in, the inside of a button.
Use GdSkeleton the moment what is coming has a shape, and give it that shape: the real widths, the real heights, the real number of rows.
Use GdProgress only when you know the proportion. If you do not, this is the wrong component — go back to a spinner or a skeleton.
Use tone="org" on the avatar for the organisation or account that owns the workspace; leave every person on person.
Use GdAvatarGroup rather than a row of avatars whenever the count can grow. It caps at three and counts the rest for you.
Use GdKbd for a key someone presses and GdCode for a fact a machine asserts. They are not interchangeable.
Do not reach for tinted on inline code inside prose. Save it for a dense row where the identifier has to survive the surrounding noise.

Behavior & Anatomy

No shimmer

A sweeping gradient across a panel of eight bars is decoration, and decoration does not move in this system. The grey block already says "not yet". A skeleton whose shape does not match what replaces it is worse than a spinner, because it makes a promise about the layout and then breaks it.

Why the avatar group caps itself

Groups overlap 8px with a 2px surface ring and cap at three plus a count — three faces and "+2" says "a few people" in a fifth of the space eleven avatars would take. The cap is the component's rather than the caller's because the failure mode is predictable: a project with eleven collaborators renders eleven avatars, and the row stops meaning "a few people" and starts being furniture. The accessible name is the full list; the visual is the summary, the label is the truth.

There is deliberately no image slot. GRIDD has no photography, and a component with an unused capability is a capability someone will eventually misuse. The initials are derived from the name rather than passed in, so they cannot disagree with the label beside them.

The keycap's one pixel of dimension

The keycap has a 2px bottom edge — the one pixel of dimension in the system, because a key is the single thing here with a physical referent. GdCode has no background by default: a tinted box behind every identifier in a sentence turns prose into a chequerboard, and the typeface is already the signal.