CSS: spinner

.instui-spinner — วงแสดงการโหลดแบบเคลื่อนไหว; กำหนด role="status" และ aria-label ให้มัน.

-color-inverse จะทาสีเฉพาะส่วนขอบบนที่เคลื่อนไหว ไม่ใช่ทั้งแทร็ก ดังนั้นยังอ่านได้ถูกต้องบนการ์ดสีเข้มโดยไม่ต้องมีสีแทร็กแยกต่างหาก.

Source: spinner.css

การเข้าถึง

กำหนด role="status" และ aria-label ให้กับ spinner เพื่อให้โปรแกรมอ่านหน้าจอประกาศเป็นสถานะการโหลดแบบสด.

การใช้งาน

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