CSS: spinner

.instui-spinner — یک حلقهٔ بارگذاری انیمیشنی؛ به آن role="status" و aria-label اختصاص دهید.

-color-inverse تنها بخش بالایی مرز متحرک را دوباره رسم می‌کند، نه کل مسیر (track)، بنابراین روی یک کارت تیره نیز به‌درستی خوانده می‌شود بدون نیاز به رنگ جداگانه برای مسیر.

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))