CSS: spinner

.instui-spinner — Անիմացված բեռնման օղակ կամ AI սպիններ; տրամադրեք նրան role="status" և aria-label։

-color-inverse միայն վերագծում է անիմացված վերին եզրաբիծը, ոչ ամբողջ ուղին, այնպես որ այն դեռ ճիշտ է ընթեռնվում մուգ քարտի վրա առանց առանձին ուղու գույնի անհրաժեշտության։ AI տարբերակները օղակը փոխարինում են կենտրոնացված ai-spinner գլիֆով, իսկ չափսը պահպանվում է։

Source: spinner.css

Մուտքականություն

Տվեք spinner-ին 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')