CSS: spinner

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

-color-inverse فقط بخش بالایی مرز متحرک را دوباره‌رنگ می‌کند، نه کل مسیر، بنابراین روی کارت تیره بدون نیاز به رنگ مسیر جداگانه هم به‌درستی خوانده می‌شود. واریانت‌های AI حلقه را با گلیف مرکزی ai-spinner جایگزین می‌کنند در حالی که همان مقیاس اندازه را حفظ می‌کنند.

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-ai	ستارهٔ گرادیانِ AI در حال چرخش.
.-color-ai-on-color	ستارهٔ AI هم‌رنگ در حال چرخش برای سطحی رنگی یا تیره.
.-color-inverse	روی یک سطح تیره.
.-size-large	بزرگ. نام طولانی‌ترِ -size-lg.
.-size-lg	بزرگ.
.-size-sm	کوچک.
.-size-small	کوچک. نام طولانی‌ترِ -size-sm.
.-size-x-small	خیلی کوچک. نام طولانی معادلِ -size-xs.
.-size-xs	خیلی کوچک.

انیمیشن‌ها

انیمیشن	توضیحات
pantoken-spinner-rotate	حلقه را می‌چرخاند، یا ستارهٔ AI را با آهنگ کندتر 2.25 ثانیه‌ای.

توکن‌های مصرف‌شده

Token	نوع	مقدار
--instui-color-icon-on-color	<color>	#ffffff
--instui-color-stroke-ai-bottom-gradient	<color>	LightDarklight-dark(#00828E, #04A4B7)
--instui-color-stroke-ai-top-gradient	<color>	LightDarklight-dark(#9E58BD, #B680CC)
--instui-component-spinner-color	<color>	LightDarklight-dark(#2369A4, #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))
--instui-icon-ai-spinner	<image>	url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M11.0621%202.53451C11.3843%201.66389%2012.6157%201.66389%2012.9379%202.53451L15.0815%208.32767C15.1828%208.60139%2015.3986%208.8172%2015.6723%208.91848L21.4655%2011.0621C22.3361%2011.3843%2022.3361%2012.6157%2021.4655%2012.9379L15.6723%2015.0815C15.3986%2015.1828%2015.1828%2015.3986%2015.0815%2015.6723L12.9379%2021.4655C12.6157%2022.3361%2011.3843%2022.3361%2011.0621%2021.4655L8.91849%2015.6723C8.8172%2015.3986%208.60139%2015.1828%208.32767%2015.0815L2.53451%2012.9379C1.66389%2012.6157%201.66389%2011.3843%202.53451%2011.0621L8.32767%208.91849C8.60139%208.8172%208.8172%208.60139%208.91848%208.32767L11.0621%202.53451Z%22%2F%3E%3C%2Fsvg%3E')