CSS: spinner

.instui-spinner — Một vòng tải hoạt hình hoặc trình quay AI; đặt role="status" và một aria-label.

-color-inverse chỉ vẽ lại đoạn viền trên đang hoạt hình, không phải toàn bộ đường dẫn, vì vậy nó vẫn được đọc chính xác trên một thẻ tối mà không cần một màu đường dẫn riêng. Các biến thể AI thay thế vòng bằng ký tự ai-spinner được căn giữa trong khi giữ cùng tỉ lệ kích thước.

Source: spinner.css

Khả năng truy cập

Gán role="status" và aria-label cho vòng tải để trình đọc màn hình thông báo nó là trạng thái đang tải trực tiếp.

Sử dụng

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

Demo

Các ví dụ

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

Bộ sửa

Bộ sửa	Mô tả
.-color-ai	Ngôi sao gradient AI đang quay.
.-color-ai-on-color	Ngôi sao AI đồng màu đang quay, dành cho bề mặt có màu hoặc nền tối.
.-color-inverse	Trên bề mặt tối.
.-size-large	Lớn. Bút danh dài của -size-lg.
.-size-lg	Lớn.
.-size-sm	Nhỏ.
.-size-small	Nhỏ. Bút danh dài của -size-sm.
.-size-x-small	Cực nhỏ. Bí danh đầy đủ của -size-xs.
.-size-xs	Cực nhỏ.

Hoạt ảnh

Hoạt ảnh	Mô tả
pantoken-spinner-rotate	Xoay vòng, hoặc xoay ngôi sao AI với nhịp chậm hơn 2.25 giây.

Token tiêu thụ

Token	Kiểu	Giá trị
--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')