CSS: progress-circle

.instui-progress-circle · stable — Gelung progres bulat yang dikawal oleh sifat tersuai --value dan --value-max.

Gelung ini ialah donat conic-gradient yang dilukis pada ::before dan dipotong dengan topeng radial-gradient; --value dibahagi dengan --value-max menggerakkan lengkungan. Tambah -should-animate dan muatkan titik masuk interaksi untuk menganimasi dari sifar semasa mount. InstUI tidak mempunyai keadaan tak tentu; :indeterminate ialah anggapan terbaik khusus pantoken ( <progress> natif tanpa atribut value), memutarkan gelung pada lengkungan tetap dan menyembunyikan .value kerana tiada nombor bermakna untuk dipaparkan. <meter> tidak mempunyai keadaan tak tentu, jadi ia tidak terjejas.

Source: progress-circle.css

TIP

Peningkatan JS — CSS komponen ini dirender dan berfungsi sendiri; padankan dengan @pantoken/interactions untuk menambah tingkah laku interaktif. Pengubah -should-animate dipacu oleh tingkah laku itu. Lihat jadual pengubah di bawah.

Aksesibiliti

Gunakan <progress> natif untuk julat penyelesaian tugas berasaskan sifar dan <meter> apabila nilai minima bukan sifar. Beri nama boleh diakses kepada mana-mana elemen dengan menyarungkannya dalam <label> atau mengaitkan <label> berasingan melalui padanan nilai for dan id.

Penggunaan

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

Contoh

Nested label

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

External label

<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

label
  .instui-progress-circle
    .value

// Variant: external-label

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;

Pemodifikasi

Pemodifikasi	Penerangan
.-color-brand	Warna meter jenama.
.-color-danger	Warna meter bahaya.
.-color-info	Warna meter maklumat.
.-color-primary-inverse	Warna meter untuk latar gelap (invers utama).
.-color-success	Warna meter kejayaan.
.-color-warning	Warna meter amaran.
.-meter-color-alert	Usang — use .-color-warning.
.-meter-color-brand	Usang — use .-color-brand.
.-meter-color-danger	Usang — use .-color-danger.
.-meter-color-info	Usang — use .-color-info.
.-meter-color-success	Usang — use .-color-success.
.-meter-color-warning	Usang — 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 bagi -size-lg.
.-size-lg	Besar.
.-size-md	Sederhana (lalai).
.-size-medium	Sederhana (lalai). Alih panjang untuk -size-md.
.-size-sm	Kecil.
.-size-small	Kecil. Alias bentuk panjang bagi -size-sm.
.-size-x-small	Sangat kecil. Alias bentuk panjang bagi -size-xs.
.-size-xs	Sangat kecil.

Bahagian

Bahagian	Penerangan
.value	Teks nilai yang dipusatkan di lubang donat gelung.

Pseudo-elemen

Pseudo-elemen	Penerangan
:::indeterminate	Tersuai, bukan sebahagian InstUI. Digunakan hanya untuk <progress> natif yang tidak mempunyai atribut value; memutarkan ::before pada lengkungan tetap dan menyembunyikan .value.
::before	Melukis gelung itu sendiri: donat conic-gradient yang dipotong dengan topeng radial, lengkungnya mengikuti sifat tersuai --value.

Keadaan

Keadaan	Penerangan
:indeterminate	—

Hartanah tersuai

Sifat	Jenis	Lalai	Penerangan
--animation-delay	<number>	—	Millisaat untuk menunggu sebelum memulakan animasi mount (lalai 0).
--max	<number>	—	Nilai progres maksimum (lalai 100).
--min	<number>	—	Nilai meter minima (lalai 0).
--pantoken-pc-fill	<color>	—	Warna lengkungan terisi (meter); pengubah -color-* menetapkannya.
--pantoken-pc-stroke	<length>	—	Lebar strok gelung; pengubah -size-* menetapkannya.
--pantoken-pc-track	<color>	—	Warna trek yang tidak terisi.
--value	<number>	—	Nilai progres semasa; didaftarkan dengan @property supaya ia boleh beralih.
--value-max	<number>	—	@alias {@link --max} Nilai progres maksimum (lalai 100).
--value-now	<number>	—	@alias Alias untuk --value.

Animasi

Animasi	Penerangan
pantoken-progress-circle-indeterminate	—

Token digunakan

Token	Jenis	Nilai
--instui-component-progress-circle-color	<color>	LightDarklight-dark(#273540, #ffffff)
--instui-component-progress-circle-color-inverse	<color>	LightDarklight-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>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-progress-circle-meter-color-brand-inverse	<color>	LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-circle-meter-color-danger	<color>	#E62429
--instui-component-progress-circle-meter-color-danger-inverse	<color>	LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-circle-meter-color-info	<color>	#2B7ABC
--instui-component-progress-circle-meter-color-info-inverse	<color>	LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-circle-meter-color-success	<color>	#03893D
--instui-component-progress-circle-meter-color-success-inverse	<color>	LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-circle-meter-color-warning	<color>	#CF4A00
--instui-component-progress-circle-meter-color-warning-inverse	<color>	LightDarklight-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>	LightDarklight-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

Sokongan pelayar

• Mendaftar sifat nombor progres dengan @property dan melukis dengan CSS mask dan conic-gradient; apabila peralihan sifat tersuai tidak disokong, gelung masih dirender tetapi tidak akan dianimasikan.

Berkaitan

• progress — Bentuk bar linear bagi progres yang sama dan boleh ditentukan.