Design SystemComponentsSpinner

Spinner

Installation

import { Button, Spinner } from "@olab/components";

Overview

轉圈的載入圖示。它其實就是 Icon 的 spinner 圖形，尺寸沿用 Icon 的四階（12 / 16 / 20 / 24px），也可以直接給任意寬度。

顏色跟著所在位置的圖示色走；Button 的 loading 狀態裡用的也是它。

Interactive Demo

TOGGLE — visibility only; spinner is a CSS animation

State Matrix

SIZE — xs / sm / md / lg (no interaction states)

xs
sm
md
lg

Examples

CUSTOM SIZE — size accepts any CSS width string

32px
48px

Spec

PartValueSource class
ShapeIcon「spinner」圖形<Icon name="spinner" />
Sizexs 12px · sm 16px · md 20px（預設）· lg 24px；或任意寬度size
Color跟隨圖示色--icon-color

Spinner 是 Icon 的薄包裝，尺寸取自 Icon 的 size 對照表；source class 對照目前的元件原始碼，色票隨目前的 dark / light 模式即時解析。完整量測、狀態細節與已知不一致見 live-ds-spec/spinner.md。

Usage

Do

  • 不知道要等多久的短暫等待：送出後、區塊重新整理時。
  • 按鈕本身在等待時，用 Button 的 loading，不要另外在旁邊放一顆。
  • 跟文字並排時選跟字級相近的尺寸（14px 字配 sm）。

Don't

  • 整頁或整個列表第一次載入時不要只放一顆 Spinner；用 Skeleton 排出輪廓。
  • 知道進度時不要用 Spinner；改用 Progress。
  • 不要同一個畫面放好幾顆一起轉。