CSS: progress-circle

.instui-progress-circle · stable — Cincin progres melingkar yang digerakkan oleh properti kustom --value dan --value-max.

Cincin adalah donat conic-gradient yang dilukis pada ::before dan dipotong dengan masker radial-gradient; --value dibagi oleh --value-max menggerakkan busur. Tambahkan -should-animate dan muat titik masuk interaksi untuk menganimasikannya dari nol saat mount. InstUI tidak memiliki status indeterminate; :indeterminate adalah tebakan terbaik khusus pantoken (native <progress> tanpa atribut value), memutar cincin pada busur tetap dan menyembunyikan .value karena tidak ada angka bermakna untuk ditampilkan. <meter> tidak memiliki status indeterminate, jadi tidak terpengaruh.

Source: progress-circle.css

TIP

Peningkatan JS — CSS komponen ini merender dan bekerja sendiri; padukan dengan @pantoken/interactions untuk menambahkan perilaku interaktif. Modifier -should-animate dikendalikan oleh perilaku tersebut. Lihat tabel modifier di bawah.

Aksesibilitas

Gunakan native <progress> untuk rentang penyelesaian tugas berbasis nol dan <meter> ketika minimum bukan nol. Beri salah satu elemen nama yang dapat diakses dengan menempatkannya di dalam <label> atau mengaitkan <label> terpisah melalui pencocokan nilai for dan id.

Penggunaan

css

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

Contoh

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>

Struktur

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

Modifikator

Modifikator	Deskripsi
`.-color-brand`	Warna meter merek.
`.-color-danger`	Warna meter bahaya.
`.-color-info`	Warna meter informasional.
`.-color-primary-inverse`	Warna meter untuk latar gelap (inverse utama).
`.-color-success`	Warna meter sukses.
`.-color-warning`	Warna meter peringatan.
`.-meter-color-alert`	Tidak disarankan — use `.-color-warning`.
`.-meter-color-brand`	Tidak disarankan — use `.-color-brand`.
`.-meter-color-danger`	Tidak disarankan — use `.-color-danger`.
`.-meter-color-info`	Tidak disarankan — use `.-color-info`.
`.-meter-color-success`	Tidak disarankan — use `.-color-success`.
`.-meter-color-warning`	Tidak disarankan — 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`	Besar. Alias bentuk panjang dari `-size-lg`.
`.-size-lg`	Besar.
`.-size-md`	Sedang (default).
`.-size-medium`	Sedang (default). Alias bentuk panjang dari `-size-md`.
`.-size-sm`	Kecil.
`.-size-small`	Kecil. Alias bentuk panjang dari `-size-sm`.
`.-size-x-small`	Ekstra kecil. Alias bentuk panjang dari `-size-xs`.
`.-size-xs`	Ekstra kecil.

Bagian

Bagian	Deskripsi
`.value`	Teks nilai yang dipusatkan di lubang cincin.

Pseudo-elemen

Pseudo-elemen	Deskripsi
`:::indeterminate`	Kustom, bukan bagian dari InstUI. Berlaku hanya untuk native `<progress>` yang kehilangan atribut `value`; memutar `::before` pada busur tetap dan menyembunyikan `.value`.
`::before`	Menggambar cincin itu sendiri: donat conic-gradient yang dipotong dengan masker radial, busurnya mengikuti properti kustom `--value`.

Status

Status	Deskripsi
`:indeterminate`	—

Properti khusus

Properti	Tipe	Bawaan	Deskripsi
`--animation-delay`	`<number>`	—	Milidetik untuk menunggu sebelum memulai animasi mount (default `0`).
`--max`	`<number>`	—	Nilai progres maksimum (default `100`).
`--min`	`<number>`	—	Nilai meter minimum (default `0`).
`--pantoken-pc-fill`	`<color>`	—	Warna busur terisi (meter); modifier -color-* mengaturnya.
`--pantoken-pc-stroke`	`<length>`	—	Lebar garis cincin; modifier -size-* mengaturnya.
`--pantoken-pc-track`	`<color>`	—	Warna trek yang tidak terisi.
`--value`	`<number>`	—	Nilai progres saat ini; didaftarkan dengan @property sehingga dapat ditransisikan.
`--value-max`	`<number>`	—	@alias {@link --max} Nilai progres maksimum (default `100`).
`--value-now`	`<number>`	—	@alias Alias untuk `--value`.

Animasi

Animasi	Deskripsi
`pantoken-progress-circle-indeterminate`	—

Token yang digunakan

Token	Tipe	Nilai
`--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`

Dukungan peramban

Mendaftarkan properti progres numerik dengan @property dan melukis dengan CSS mask dan conic-gradient; di tempat transisi custom-property tidak didukung, cincin masih dirender tetapi tidak akan teranimasi.

Terkait

progress — Bentuk bar linier dari progres determinate yang sama.

pantoken

postcss

typedoc

vite

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

CSS: progress-circle ​

Aksesibilitas ​

Penggunaan ​

Contoh ​

Nested label ​

External label ​

Struktur ​

Modifikator ​

Bagian ​

Pseudo-elemen ​

Status ​

Properti khusus ​

Animasi ​

Token yang digunakan ​

Dukungan peramban ​

Terkait ​