CSS: progress

.instui-progress · stable — Ein determinert framdriftslinje med eit farga målarfelt, storleikar, og ei valfri verdimerkjing.

.value er ein sysken til .bar, begge born av roten — som speglar korleis progress-circle nestar sin eigen .value-del. InstUI har inga ubestemt tilstand; :indeterminate er eit pantoken-eige beste gjetting (nativt <progress> utan eit value-attributt), animerer .bar som ein gliande segment og skjuler .value sidan det ikkje finst eit meiningsfullt tal å vise. <meter> har ingen ubestemt tilstand, så det vert ikkje påverka.

Source: progress.css

Tilgjenge

Bruk native <progress> for eit nullbasert oppgåvfullføringsområde og <meter> når minimum ikkje er null. Gi anten elementet eit tilgjengeleg namn ved å plassere det inne i <label> eller ved å assosiere ein separat <label> med matchande for- og id-verdiar.

Bruk

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

Døme

Nested label

<label>
  Uploading Document: <progress class="instui-progress -color-brand" value="70">70%</progress>
</label>

External label

<label for="storage-used">Storage used</label>
<meter id="storage-used" class="instui-progress -color-warning" min="20" value="40" max="60">50%</meter>

Struktur

// Variant: nested-label

label
  .instui-progress
    .bar
    .value

// Variant: external-label

label
.instui-progress
  .bar
  .value

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

Modifikatorar

Modifikator	Skildring
.-color-brand	Farge for merke-målar
.-color-danger	Farge på faremålaren
.-color-info	Farge for informasjonsmålar.
.-color-inverse	For mørke bakgrunnar.
.-color-primary-inverse	On-dark (primær invers) målarfarge.
.-color-success	Farge for suksessmålar.
.-color-warning	Farge på varselmålar.
.-meter-color-alert	Utdatert — use .-color-warning.
.-meter-color-brand	Utdatert — use .-color-brand.
.-meter-color-danger	Utdatert — use .-color-danger.
.-meter-color-info	Utdatert — use .-color-info.
.-meter-color-success	Utdatert — use .-color-success.
.-meter-color-warning	Utdatert — use .-color-warning.
.-render-value-inside	Renderer .value inne i sporet, justert til starten i staden for ved sida av; stilsett det for lesbarheit over målarfargen.
.-should-animate	Interaction — Animate meter changes over half a second.
.-size-large	Stor. Langform-alias av -size-lg.
.-size-lg	Stor.
.-size-md	Middels (standard).
.-size-medium	Medium (standard). Langform-aliaset til -size-md.
.-size-sm	Liten.
.-size-small	Liten. Langform-alias av -size-sm.
.-size-x-small	Ekstra liten. Langform-alias av -size-xs.
.-size-xs	Ekstra liten.

Delar

Del	Skildring
.bar	Det fylte målarfeltet.
.value	Verditeksten ved sida av linja.

Pseudo-element

Pseudo-element	Skildring
:::indeterminate	Eigenskap, ikkje ein del av InstUI. Gjelder kun for eit nativt <progress> som manglar sitt value-attributt; animerer .bar som eit gliande segment og skjuler .value.
::after	Teiknar sporets nedre linje som eit eige lag over målaren, slik at den fullstendige ramma og botnramma held seg uavhengige på tvers av tema.

Tilstandar

Tilstand	Skildring
:indeterminate	—

Tilpassa eigenskapar

Eigenskap	Type	Standard	Skildring
--max	<number>	—	Maksimal framdriftsverdi (standard 100).
--min	<number>	—	Den minste målarverdien (standard 0).
--value	<number>	—	Den noverande framdriftsverdien.
--value-max	<number>	—	@alias {@link --max} Den maksimale framdriftsverdien (standard 100).
--value-now	<number>	—	@alias Eit alias for --value.

Animasjonar

Animasjon	Skildring
pantoken-progress-indeterminate	—

Token brukt

Token	Type	Verdi
--instui-color-background-brand	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-background-error	<color>	#E62429
--instui-color-background-info	<color>	#2B7ABC
--instui-color-background-success	<color>	#03893D
--instui-color-background-warning	<color>	#CF4A00
--instui-component-progress-bar-border-color	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-progress-bar-border-color-inverse	<color>	LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-bar-border-radius	<length>	0.5rem
--instui-component-progress-bar-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-progress-bar-font-weight	<integer>	400
--instui-component-progress-bar-large-height	<length>	2rem
--instui-component-progress-bar-line-height	<percentage>	125%
--instui-component-progress-bar-medium-height	<length>	1.5rem
--instui-component-progress-bar-medium-value-font-size	<length>	1rem
--instui-component-progress-bar-meter-color-brand-inverse	<color>	LightDarklight-dark(#ffffff, #10141A)
--instui-component-progress-bar-small-height	<length>	1rem
--instui-component-progress-bar-text-color	<color>	LightDarklight-dark(#576773, #AAB0B5)
--instui-component-progress-bar-text-color-inverse	<color>	LightDarklight-dark(#ffffff, #1C222B)
--instui-component-progress-bar-track-bottom-border-color	<color>	#00000000
--instui-component-progress-bar-track-bottom-border-color-inverse	<color>	#00000000
--instui-component-progress-bar-track-bottom-border-width	<length>	0.0625rem
--instui-component-progress-bar-track-color	<color>	#00000000
--instui-component-progress-bar-track-color-inverse	<color>	#00000000
--instui-component-progress-bar-value-padding	<length>	0.5rem
--instui-component-progress-bar-x-small-height	<length>	0.5rem

Nettlesarstøtte

• Skapar omfang for reglane til målar-delen med @scope at-regelen; nettlesarar utan støtte for @scope ignorerer desse scoped-reglane.

Relatert

• progress-circle — Den sirkulære forma av same determinert framdrift.