CSS: spinner

.instui-spinner — حلقة تحميل متحركة أو مؤشر دوران للذكاء الاصطناعي; امنحها role="status" و aria-label.

-color-inverse يعيد رسم مقطع الحد العلوي المتحرك فقط، وليس المسار بأكمله، لذا يظل مقروءًا بشكل صحيح على بطاقة داكنة دون الحاجة إلى لون مسار منفصل. تستبدل متغيرات الذكاء الاصطناعي الحلقة بالرمز ai-spinner المتمركز مع الحفاظ على نفس مقياس الحجم.

Source: spinner.css

Accessibility

امنح المؤشر role="status" و aria-label حتى تُعلن قارئات الشاشة عنه كحالة تحميل مباشرة.

Usage

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

Demo

Examples

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

Modifiers

Modifier	Description
.-color-ai	نجمة متدرجة للذكاء الاصطناعي تدور.
.-color-ai-on-color	نجمة ذكاء اصطناعي ملونة دوارة لسطح ملون أو داكن.
.-color-inverse	على سطح داكن.
.-size-large	اسم مرادف مطوّل لـ -size-md.
.-size-lg	كبير.
.-size-sm	صغير.
.-size-small	اسم مرادف مطوّل لـ -size-sm.
.-size-x-small	صغير جدًا. اسم مُطوّل مرادف لـ -size-xs.
.-size-xs	صغير جدًا.

Animations

Animation	Description
pantoken-spinner-rotate	تدور الحلقة، أو نجمة الذكاء الاصطناعي بإيقاع أبطأ يبلغ 2.25 ثانية.

Tokens consumed

Token	Type	Value
--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')