CSS: progress-circle

.instui-progress-circle · stable — Un anello di progresso circolare guidato dalle proprietà personalizzate --value e --value-max.

L'anello è una ciambella conic-gradient dipinta su ::before e ritagliata con una maschera radial-gradient; --value diviso per --value-max guida l'arco. Aggiungere -should-animate e caricare il punto d'ingresso delle interazioni per animarlo da zero al mount. InstUI non dispone di uno stato indeterminato; :indeterminate è un'approssimazione specifica di pantoken (nativo <progress> senza attributo value), facendo ruotare l'anello con un arco fisso e nascondendo .value poiché non c'è un numero significativo da mostrare. <meter> non ha uno stato indeterminato, quindi non è interessato.

Source: progress-circle.css

TIP

Miglioria JS — Il CSS di questo componente rende e funziona da solo; abbinarlo a @pantoken/interactions per aggiungere il comportamento interattivo. Il suo modificatore -should-animate è guidato da quel comportamento. Vedi la tabella dei modificatori.

Accessibilità

Usare il nativo <progress> per un intervallo di completamento attività a base zero e <meter> quando il minimo è diverso da zero. Dare a uno dei due elementi un nome accessibile annidandolo in <label> o associando un <label> separato tramite valori for e id corrispondenti.

Uso

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

Esempi

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>

Struttura

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

Modificatori

Modificatore	Descrizione
.-color-brand	Colore del misuratore brand.
.-color-danger	Colore del misuratore per pericolo.
.-color-info	Colore del misuratore informativo.
.-color-primary-inverse	Colore del misuratore su sfondo scuro (inverse primario).
.-color-success	Colore del misuratore successo.
.-color-warning	Colore del misuratore avviso.
.-meter-color-alert	Deprecato — use .-color-warning.
.-meter-color-brand	Deprecato — use .-color-brand.
.-meter-color-danger	Deprecato — use .-color-danger.
.-meter-color-info	Deprecato — use .-color-info.
.-meter-color-success	Deprecato — use .-color-success.
.-meter-color-warning	Deprecato — 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	Grande. Alias esteso di -size-lg.
.-size-lg	Grande.
.-size-md	Medio (predefinito).
.-size-medium	Medio (predefinito). Alias in forma estesa di -size-md.
.-size-sm	Piccolo.
.-size-small	Piccolo. Alias esteso di -size-sm.
.-size-x-small	Extra small. Alias esteso di -size-xs.
.-size-xs	Extra small.

Parti

Parte	Descrizione
.value	Il testo del valore centrato nel buco dell'anello.

Pseudo-elementi

Pseudo-elemento	Descrizione
:::indeterminate	Personalizzato, non parte di InstUI. Si applica solo a un nativo <progress> privo dell'attributo value; fa ruotare ::before con un arco fisso e nasconde .value.
::before	Disegna l'anello stesso: una ciambella con conic-gradient ritagliata con una maschera radiale, il cui arco segue la proprietà personalizzata --value.

Stati

Stato	Descrizione
:indeterminate	—

Proprietà personalizzate

Proprietà	Tipo	Predefinito	Descrizione
--animation-delay	<number>	—	Millisecondi da aspettare prima di avviare l'animazione di mount (predefinito 0).
--max	<number>	—	Il valore massimo di progresso (predefinito 100).
--min	<number>	—	Il valore minimo del misuratore (predefinito 0).
--pantoken-pc-fill	<color>	—	Il colore dell'arco riempito (misuratore); i modificatori -color-* lo impostano.
--pantoken-pc-stroke	<length>	—	La larghezza della traccia dell'anello; i modificatori -size-* la impostano.
--pantoken-pc-track	<color>	—	Il colore della traccia non riempita.
--value	<number>	—	Il valore corrente di progresso; registrato con @property così da poter transitare.
--value-max	<number>	—	@alias {@link --max} Il valore massimo di progresso (predefinito 100).
--value-now	<number>	—	@alias Alias per --value.

Animazioni

Animazione	Descrizione
pantoken-progress-circle-indeterminate	—

Token consumati

Token	Tipo	Valore
--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

Supporto browser

• Registra le proprietà numeriche di progresso con @property e dipinge con i CSS mask e conic-gradient; dove le transizioni delle proprietà personalizzate non sono supportate, l'anello viene comunque renderizzato ma non si animerà.

Correlati

• progress — La forma lineare a barra dello stesso progresso determinato.