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	Large。-size-lg の長い別名。
.-size-lg	Large。
.-size-sm	Small。
.-size-small	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))