CSS: spinner

.instui-spinner — Một vòng tải động; gán role="status" và aria-label.

-color-inverse chỉ tô lại đoạn viền trên có hoạt ảnh, không phải toàn bộ đường chạy, nên nó vẫn hiển thị đúng trên thẻ tối mà không cần màu đường chạy riêng.

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

Token tiêu thụ

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