CSS: progress-circle

.instui-progress-circle · stable — --value ve --value-max özel değişkenleri tarafından kontrol edilen dairesel bir ilerleme halkası.

Halka, conic-gradient üzerinde çizilmiş bir donut olup ::before üzerinde boyanır ve bir radial-gradient maskesi ile kırpılır; yayı sürdürmek için --value bölü --value-max kullanılır. Sıfırdan animasyon için -should-animate ekleyin ve etkileşim giriş noktasını yükleyin. InstUI'nin belirsiz durumu yoktur; :indeterminate pantoken'a özgü bir varsayımdır (native <progress> içinde value özniteliği olmadan), halkayı sabit bir yayda döndürür ve gösterilecek anlamlı bir sayı olmadığından .value'i gizler. <meter>'un belirsiz durumu yoktur, dolayısıyla etkilenmez.

Source: progress-circle.css

TIP

JS İyileştirmesi — Bu bileşenin CSS'i kendi başına render olur ve çalışır; etkileşimli davranışı eklemek için @pantoken/interactions ile eşleştirin. Onun -should-animate modifiyeri o davranış tarafından kontrol edilir. Bakınız aşağıdaki modifiyer tablosu.

Erişilebilirlik

Sıfır tabanlı görev tamamlama aralığı için native <progress> kullanın ve minimum sıfır değilse <meter> kullanın. Her iki elemana da erişilebilir bir isim vermek için onu <label> içine yerleştirin veya ayrı bir <label> ile eşleşen for ve id değerleri aracılığıyla ilişkilendirin.

Kullanım

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

Örnekler

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>

Yapı

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

Değiştiriciler

Değiştirici	Açıklama
.-color-brand	Marka (brand) sayaç rengi.
.-color-danger	Tehlike (danger) sayaç rengi.
.-color-info	Bilgilendirici (informational) sayaç rengi.
.-color-primary-inverse	Koyu zeminde (primary inverse) sayaç rengi.
.-color-success	Başarılı (success) sayaç rengi.
.-color-warning	Uyarı (warning) sayaç rengi.
.-meter-color-alert	Kullanımdan kaldırıldı — use .-color-warning.
.-meter-color-brand	Kullanımdan kaldırıldı — use .-color-brand.
.-meter-color-danger	Kullanımdan kaldırıldı — use .-color-danger.
.-meter-color-info	Kullanımdan kaldırıldı — use .-color-info.
.-meter-color-success	Kullanımdan kaldırıldı — use .-color-success.
.-meter-color-warning	Kullanımdan kaldırıldı — 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	Büyük. -size-lg'ın uzun biçimli takma adı.
.-size-lg	Büyük.
.-size-md	Orta (varsayılan).
.-size-medium	Orta (varsayılan). -size-md için uzun biçimli takma ad.
.-size-sm	Küçük.
.-size-small	Küçük. -size-sm'ın uzun biçimli takma adı.
.-size-x-small	Ekstra küçük. -size-xs'ın uzun biçimli takma adı.
.-size-xs	Ekstra küçük.

Bölümler

Parça	Açıklama
.value	Halkanın boşluğunda merkezlenmiş değer metni.

Sözde elemanlar

Sözde eleman	Açıklama
:::indeterminate	Özel, InstUI'nin parçası değildir. Sadece value özniteliği eksik olan native <progress> üzerinde uygulanır; ::before'yi sabit bir yayda döndürür ve .value'ü gizler.
::before	Halkanın kendisini çizer: bir conic-gradient donut, radial maskesi ile kırpılır ve yayı --value özel değişkenini izler.

Durumlar

Durum	Açıklama
:indeterminate	—

Özel özellikler

Özellik	Tür	Varsayılan	Açıklama
--animation-delay	<number>	—	Mount animasyonunu başlatmadan önce beklenen milisaniye (varsayılan 0).
--max	<number>	—	Maksimum ilerleme değeri (varsayılan 100).
--min	<number>	—	Minimum sayaç değeri (varsayılan 0).
--pantoken-pc-fill	<color>	—	Doldurulmuş yayın (meter) rengi; -color-* modifiyerleri bunu ayarlar.
--pantoken-pc-stroke	<length>	—	Halkanın çizgi genişliği; -size-* modifiyerleri bunu ayarlar.
--pantoken-pc-track	<color>	—	Doldurulmamış yolun (track) rengi.
--value	<number>	—	Mevcut ilerleme değeri; @property ile kaydedilir, böylece geçiş yapabilir.
--value-max	<number>	—	@alias {@link --max} Maksimum ilerleme değeri (varsayılan 100).
--value-now	<number>	—	@alias --value için takma ad.

Animasyonlar

Animasyon	Açıklama
pantoken-progress-circle-indeterminate	—

Tüketilen tokenler

Token	Tür	Değer
--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

Tarayıcı desteği

• Sayısal ilerleme özelliklerini @property ile kaydeder ve CSS mask ile conic-gradient kullanarak boyar; özel-değişken geçişleri desteklenmiyorsa halka yine render olur ancak animasyon yapmaz.

İlgili

• progress — Aynı belirlenmiş ilerlemenin doğrusal çubuk biçimi.