Spin

Spin is the block loading indicator: a brand ring by itself, or a soft white mask over content. Button loading and Message loading share the same stroke language; Spin owns the overlay.

Demos

Sizes

Diameters are sm 18, md 28, and lg 40. Stroke widths are 2 / 2.5 / 3. The track is 25% brand and the top edge is solid brand, rotating for 0.75s.

sm 18

md 28

lg 40

<gk-spin size="sm"></gk-spin>
<gk-spin size="md" description="Loading…"></gk-spin>
<gk-spin size="lg" description="Fetching data"></gk-spin>

Wrap content

With children and show, a mask of color-mix(#fff 55%, transparent) covers the box. Content stays in flow and loses pointer events.

Course details

Content keeps its space and cannot be interacted with.

<gk-spin description="Loading…">
  <article>
    <h3>Course details</h3>
    <p>Content keeps its space and cannot be interacted with.</p>
  </article>
</gk-spin>

Idle

:show="false" or show="false" hides the mask. spinning is an alias of show.

Finished

The spinner is hidden and the button can be used.

Continue

<gk-spin show="false">
  <p>The mask is gone. This button works.</p>
  <gk-button>Continue</gk-button>
</gk-spin>

Delay

delay is milliseconds before the spinner appears. If show turns off first, it never flashes. 300–500ms avoids a blink on fast requests. The default is 0.

The overlay waits 400ms. Toggle it off before that and it stays hidden.

Show after 400msHide

<gk-spin :show="delayed" delay="400" description="Loading…">
  <p>Short requests never flash the spinner.</p>
</gk-spin>

Nested loading in a dialog footer belongs to Modal. Inline button spinners belong to Button loading, not Spin.

API

Spin Props

Prop	Type	Default
show	boolean	true
spinning	boolean	alias of show
size	'sm' | 'md' | 'lg'	'md'
description	string	''
tip	string	alias of description
delay	number	0
stroke-width	number	2 / 2.5 / 3 by size

Prefer show and description. There is no v1 event.

Spin Slots

Name	Description
default	Optional content to cover while spinning

CSS Parts

Part	Description
container	Positions the mask. aria-busy while spinning
content	Slotted children
mask	Soft white overlay. Only when spinning over content
spinner	Status live region and ring
tip	Description, or a visually hidden “Loading” / 「載入中」

Accessibility

• While the spinner is visible, the container is aria-busy="true" and the spinner is role="status" with aria-live="polite".
• The announced text is description / tip, or 「載入中」 when the document language starts with zh, otherwise “Loading”.
• When idle, busy is removed and the spinner is aria-hidden.
• If show ends before delay, the status is never exposed.