CSS: spinner

.instui-spinner — Egy animált betöltési gyűrű; adjon neki role="status" és aria-label attribútumot.

Forrás: spinner.css

Akadálymentesség

Adjon a spinner-nek role="status" és aria-label attribútumot, hogy a képernyőolvasók élő betöltési állapotként jelentsék be.

Használat

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

Demó

Példák

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

Módosítók

Módosító	Leírás
.-color-inverse	Sötét felületen.
.-size-large	Nagy. Hosszú forma alias a -size-lg.
.-size-lg	Nagy.
.-size-sm	Kicsi.
.-size-small	Kicsi. Hosszú forma alias a -size-sm.
.-size-x-small	Extra kicsi. A -size-xs hosszú formájú aliasa.
.-size-xs	Extra kicsi.

Animációk

Animáció	Leírás
pantoken-spinner-rotate	—

Felhasznált tokenek

Token	Típus	Érték
--instui-component-spinner-color	<color>	light-dark(#2871AF, #7FB4F1)LightDark
--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>	light-dark(rgba(35,68,101,0.1), rgba(255,255,255,0.1))LightDark