CSS: progress-circle

.instui-progress-circle · stable — Vòng tiến trình tròn được điều khiển bởi các thuộc tính tùy chỉnh --value và --value-max.

Vòng là một donut conic-gradient được vẽ trên ::before và bị cắt bằng mặt nạ radial-gradient; --value chia cho --value-max điều khiển cung. Thêm -should-animate và nạp điểm vào tương tác để hoạt ảnh hóa nó từ không khi gắn. InstUI không có trạng thái không xác định; :indeterminate là ước đoán tốt dành riêng cho pantoken (native <progress> không có thuộc tính value), quay vòng ở cung cố định và ẩn .value vì không có số ý nghĩa để hiển thị. <meter> không có trạng thái không xác định, nên không bị ảnh hưởng.

Source: progress-circle.css

TIP

Nâng cao JS — CSS của thành phần này tự hiển thị và hoạt động độc lập; kết hợp với @pantoken/interactions để thêm hành vi tương tác. Bộ sửa đổi -should-animate của nó được điều khiển bởi hành vi đó. Xem bảng modifier bên dưới.

Khả năng truy cập

Dùng native <progress> cho phạm vi hoàn thành công việc bắt đầu từ không và <meter> khi giá trị tối thiểu khác không. Đặt tên truy cập cho phần tử bằng cách lồng nó trong <label> hoặc liên kết một <label> riêng bằng cách ghép các giá trị for và id tương ứng.

Sử dụng

css

@import "@pantoken/components/components.css";
@import "@pantoken/components/progress-circle.css";

Các ví dụ

Nested label

html

<label>
  Uploading Document: <progress class="instui-progress-circle -size-sm" value="70">70%</progress>
</label>

External label

html

<label for="score">Score</label>
<meter id="score" class="instui-progress-circle -color-success" min="20" value="40" max="60">50%</meter>

Cấu trúc

// Variant: nested-label

text

label
  .instui-progress-circle
    .value

// Variant: external-label

text

label
.instui-progress-circle
  .value

flowchart TD subgraph sg0 ["nested-label"] n1["label"]:::cssdoc-root n2(".instui-progress-circle"):::cssdoc-part n3(".value"):::cssdoc-part end subgraph sg4 ["external-label"] n5["label"]:::cssdoc-root n6[".instui-progress-circle"]:::cssdoc-root n7(".value"):::cssdoc-part end n2 --> n3 n1 --> n2 n6 --> n7 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Bộ sửa

Bộ sửa	Mô tả
`.-color-brand`	Màu hiển thị meter thương hiệu.
`.-color-danger`	Màu hiển thị meter nguy hiểm.
`.-color-info`	Màu hiển thị meter thông tin.
`.-color-primary-inverse`	Màu hiển thị meter trên nền tối (primary inverse).
`.-color-success`	Màu hiển thị meter thành công.
`.-color-warning`	Màu hiển thị meter cảnh báo.
`.-meter-color-alert`	Không khuyến nghị — use `.-color-warning`.
`.-meter-color-brand`	Không khuyến nghị — use `.-color-brand`.
`.-meter-color-danger`	Không khuyến nghị — use `.-color-danger`.
`.-meter-color-info`	Không khuyến nghị — use `.-color-info`.
`.-meter-color-success`	Không khuyến nghị — use `.-color-success`.
`.-meter-color-warning`	Không khuyến nghị — use `.-color-warning`.
`.-shold-animate-on-mount`	Alias — maps to `.-should-animate`.
`.-should-animate`	Interaction — Animate the meter, ring, and centered value into place on mount.
`.-should-animate-on-mount`	Alias — maps to `.-should-animate`.
`.-size-large`	Lớn. Bút danh dài của `-size-lg`.
`.-size-lg`	Lớn.
`.-size-md`	Trung bình (mặc định).
`.-size-medium`	Trung bình (mặc định). Bản alias dài của `-size-md`.
`.-size-sm`	Nhỏ.
`.-size-small`	Nhỏ. Bút danh dài của `-size-sm`.
`.-size-x-small`	Cực nhỏ. Bút danh dài của `-size-xs`.
`.-size-xs`	Cực nhỏ.

Phần

Phần	Mô tả
`.value`	Văn bản giá trị căn giữa ở lỗ giữa của vòng.

Phần tử giả

Phần tử giả	Mô tả
`:::indeterminate`	Tùy chỉnh, không thuộc InstUI. Chỉ áp dụng cho native `<progress>` thiếu thuộc tính `value`; quay `::before` ở cung cố định và ẩn `.value`.
`::before`	Vẽ chính vòng: một conic-gradient dạng donut được cắt bằng mặt nạ radial, cung của nó theo dõi thuộc tính tùy chỉnh `--value`.

Trạng thái

Trạng thái	Mô tả
`:indeterminate`	—

Thuộc tính tuỳ chỉnh

Thuộc tính	Kiểu	Mặc định	Mô tả
`--animation-delay`	`<number>`	—	Số mili giây chờ trước khi bắt đầu hoạt ảnh mount (mặc định `0`).
`--max`	`<number>`	—	Giá trị tiến độ tối đa (mặc định `100`).
`--min`	`<number>`	—	Giá trị meter tối thiểu (mặc định `0`).
`--pantoken-pc-fill`	`<color>`	—	Màu của cung đã lấp đầy (meter); các modifier -color-* thiết lập nó.
`--pantoken-pc-stroke`	`<length>`	—	Độ rộng đường viền của vòng; các modifier -size-* thiết lập nó.
`--pantoken-pc-track`	`<color>`	—	Màu của track chưa được lấp đầy.
`--value`	`<number>`	—	Giá trị tiến độ hiện tại; đã đăng ký với @property để có thể chuyển tiếp.
`--value-max`	`<number>`	—	@alias {@link --max} Giá trị tiến độ tối đa (mặc định `100`).
`--value-now`	`<number>`	—	@alias Bí danh cho `--value`.

Hoạt ảnh

Hoạt ảnh	Mô tả
`pantoken-progress-circle-indeterminate`	—

Token tiêu thụ

Token	Kiểu	Giá trị
`--instui-component-progress-circle-color`	`<color>`	LightDark`light-dark(#273540, #ffffff)`
`--instui-component-progress-circle-color-inverse`	`<color>`	LightDark`light-dark(#ffffff, #1C222B)`
`--instui-component-progress-circle-font-family`	`[ <font-family-name> \| <generic-font-family> ]#`	`Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif`
`--instui-component-progress-circle-font-weight`	`<integer>`	`600`
`--instui-component-progress-circle-large-size`	`<length>`	`9em`
`--instui-component-progress-circle-large-stroke-width`	`<length>`	`0.875em`
`--instui-component-progress-circle-line-height`	`<percentage>`	`125%`
`--instui-component-progress-circle-medium-size`	`<length>`	`7em`
`--instui-component-progress-circle-medium-stroke-width`	`<length>`	`0.625em`
`--instui-component-progress-circle-meter-color-brand`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-component-progress-circle-meter-color-brand-inverse`	`<color>`	LightDark`light-dark(#ffffff, #6A7883)`
`--instui-component-progress-circle-meter-color-danger`	`<color>`	`#E62429`
`--instui-component-progress-circle-meter-color-danger-inverse`	`<color>`	LightDark`light-dark(#ffffff, #6A7883)`
`--instui-component-progress-circle-meter-color-info`	`<color>`	`#2B7ABC`
`--instui-component-progress-circle-meter-color-info-inverse`	`<color>`	LightDark`light-dark(#ffffff, #6A7883)`
`--instui-component-progress-circle-meter-color-success`	`<color>`	`#03893D`
`--instui-component-progress-circle-meter-color-success-inverse`	`<color>`	LightDark`light-dark(#ffffff, #6A7883)`
`--instui-component-progress-circle-meter-color-warning`	`<color>`	`#CF4A00`
`--instui-component-progress-circle-meter-color-warning-inverse`	`<color>`	LightDark`light-dark(#ffffff, #6A7883)`
`--instui-component-progress-circle-small-size`	`<length>`	`5em`
`--instui-component-progress-circle-small-stroke-width`	`<length>`	`0.5em`
`--instui-component-progress-circle-track-color`	`<color>`	LightDark`light-dark(#ffffff, #10141A)`
`--instui-component-progress-circle-track-color-inverse`	`<color>`	`#00000000`
`--instui-component-progress-circle-x-small-size`	`<length>`	`3em`
`--instui-component-progress-circle-x-small-stroke-width`	`<length>`	`0.2em`

Hỗ trợ trình duyệt

Đăng ký các thuộc tính tiến độ số với @property và vẽ bằng CSS mask và conic-gradient; nơi chuyển đổi custom-property không được hỗ trợ, vòng vẫn hiển thị nhưng sẽ không hoạt ảnh.

Liên quan

progress — Dạng thanh tuyến tính của cùng tiến độ xác định.

pantoken

postcss

typedoc

vite

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

CSS: progress-circle ​

Khả năng truy cập ​

Sử dụng ​

Các ví dụ ​

Nested label ​

External label ​

Cấu trúc ​

Bộ sửa ​

Phần ​

Phần tử giả ​

Trạng thái ​

Thuộc tính tuỳ chỉnh ​

Hoạt ảnh ​

Token tiêu thụ ​

Hỗ trợ trình duyệt ​

Liên quan ​