No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Spinner

原始設計稿: https://zeroheight.com/5wafqtyfb/p/0568c3/b/91ebea/t/3732bc

明確告知使用者目前正在讀取過程,例如頁面還有區塊正在載入中、或是表單正在送出。

使用時機

  1. 區塊內容讀取時
  2. 按鈕點擊後,資料儲存中或狀態變更

使用範例

區塊讀取

▲ 區塊讀取


按鈕讀取狀態

▲ 按鈕讀取狀態

NameDescriptionDefault
className
傳入 react-lottie 的最外層 <div> 的 class
string
"''"
inverse
白色版本,適用深色背景,例如按鈕
bool
"false"
size
長與寬,預設 48px
number
"48"
style
傳入 react-lottie 的最外層 <div> 的 inline style
objectOf(Union<string | number>)
"{\n marginRight: 'auto',\n marginLeft: 'auto',\n}"

Stories

Basic

Inverse