CSS: spinner

.instui-spinner — 애니메이션 로딩 링입니다; role="status"와 aria-label을 지정하세요.

-color-inverse은(는) 애니메이션된 상단 테두리 부분만 다시 칠하며 트랙 전체를 다시 그리지는 않습니다. 따라서 별도의 트랙 색상이 없어도 어두운 카드에서 올바르게 표시됩니다.

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	Large. -size-lg의 장기형 별칭.
.-size-lg	크게(Large).
.-size-sm	작음(Small).
.-size-small	작음(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))