CSS: spinner

.instui-spinner — 一個動畫載入圈；請為它設置 role="status" 與 aria-label。

-color-inverse 只會重繪頂部有動畫的邊框段，而非整個軌道，因此在深色卡片上仍能正確顯示，不需要額外的軌道顏色。

Source: spinner.css

無障礙

為旋轉器設置 role="status" 與 aria-label，讓輔助閱讀器將其宣告為即時載入狀態。

使用方法

@import "@pantoken/components/components.css";
@import "@pantoken/components/spinner.css";

示範

範例

<span class="instui-spinner" role="status" aria-label="Loading"></span>

Inverse color

<div class="instui-view instui-card -background-primary-inverse">
  <span class="instui-spinner -color-inverse" role="status" aria-label="Loading"></span>
</div>

修飾器

修飾器	說明
.-color-inverse	在深色背景上。
.-size-large	大型。-size-lg 的長形式別名。
.-size-lg	大。
.-size-sm	小。
.-size-small	小。-size-sm 的長形式別名。
.-size-x-small	極小。是 -size-xs 的全寫別名。
.-size-xs	極小。

動畫

動畫	說明
pantoken-spinner-rotate	—

已使用的代幣

Token	型別	值
--instui-component-spinner-color	<color>	LightDarklight-dark(#2871AF, #7FB4F1)
--instui-component-spinner-inverse-color	<color>	#ffffff
--instui-component-spinner-spinner-size-lg	<length>	4.5rem
--instui-component-spinner-spinner-size-md	<length>	3.5rem
--instui-component-spinner-spinner-size-sm	<length>	2rem
--instui-component-spinner-spinner-size-xs	<length>	1rem
--instui-component-spinner-stroke-width-lg	<length>	0.75em
--instui-component-spinner-stroke-width-md	<length>	0.5em
--instui-component-spinner-stroke-width-sm	<length>	0.375em
--instui-component-spinner-stroke-width-xs	<length>	0.25em
--instui-component-spinner-track-color	<color>	LightDarklight-dark(rgba(35,68,101,0.1), rgba(255,255,255,0.1))