CSS: progress-circle

.instui-progress-circle · stable — Un anillo de progreso circular impulsado por las propiedades personalizadas --value y --value-max.

El anillo es una rosquilla conic-gradient pintada sobre ::before y recortada con una máscara de degradado radial; --value dividido por --value-max controla el arco. Añade -should-animate y carga el punto de entrada de interacciones para animarlo desde cero al montar. InstUI no tiene un estado indeterminado; :indeterminate es una conjetura propia de pantoken (nativo <progress> sin el atributo value), hace girar el anillo con un arco fijo y oculta .value ya que no hay un número significativo que mostrar. <meter> no tiene estado indeterminado, por lo que no se ve afectado.

Source: progress-circle.css

TIP

Mejora de JS — El CSS de este componente se renderiza y funciona por sí solo; emparejarlo con @pantoken/interactions añade el comportamiento interactivo. Su modificador -should-animate es controlado por ese comportamiento. Ver la tabla de modificadores abajo.

Accesibilidad

Usa el <progress> nativo para un rango de finalización de tarea basado en cero y <meter> cuando el mínimo no sea cero. Dale a cualquiera de los elementos un nombre accesible anidándolo en <label> o asociando un <label> separado mediante valores coincidentes de for y id.

Uso

css

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

Ejemplos

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>

Estructura

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

Modificadores

Modificador	Descripción
`.-color-brand`	Color de medidor de marca.
`.-color-danger`	Color de medidor de peligro.
`.-color-info`	Color de medidor informativo.
`.-color-primary-inverse`	Color de medidor en fondo oscuro (inverso primario).
`.-color-success`	Color de medidor de éxito.
`.-color-warning`	Color de medidor de advertencia.
`.-meter-color-alert`	Obsoleto — use `.-color-warning`.
`.-meter-color-brand`	Obsoleto — use `.-color-brand`.
`.-meter-color-danger`	Obsoleto — use `.-color-danger`.
`.-meter-color-info`	Obsoleto — use `.-color-info`.
`.-meter-color-success`	Obsoleto — use `.-color-success`.
`.-meter-color-warning`	Obsoleto — 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 en forma larga de `-size-lg`.
`.-size-lg`	Grande.
`.-size-md`	Medio (predeterminado).
`.-size-medium`	Medio (predeterminado). Alias de forma larga de `-size-md`.
`.-size-sm`	Pequeño.
`.-size-small`	Pequeño. Alias en forma larga de `-size-sm`.
`.-size-x-small`	Extra pequeño. Alias en forma larga de `-size-xs`.
`.-size-xs`	Extra pequeño.

Partes

Parte	Descripción
`.value`	El texto del valor centrado en el hueco del anillo.

Pseudoelementos

Pseudoelemento	Descripción
`:::indeterminate`	Personalizado, no parte de InstUI. Se aplica solo a un `<progress>` nativo que carezca del atributo `value`; hace girar `::before` con un arco fijo y oculta `.value`.
`::before`	Dibuja el propio anillo: una rosquilla de conic-gradient recortada con una máscara radial, cuyo arco sigue la propiedad personalizada `--value`.

Estados

Estado	Descripción
`:indeterminate`	—

Propiedades personalizadas

Propiedad	Tipo	Predeterminado	Descripción
`--animation-delay`	`<number>`	—	Milisegundos a esperar antes de iniciar la animación de montaje (predeterminado `0`).
`--max`	`<number>`	—	El valor máximo de progreso (predeterminado `100`).
`--min`	`<number>`	—	El valor mínimo del medidor (predeterminado `0`).
`--pantoken-pc-fill`	`<color>`	—	El color del arco relleno (medidor); los modificadores -color-* lo definen.
`--pantoken-pc-stroke`	`<length>`	—	El ancho del trazo del anillo; los modificadores -size-* lo establecen.
`--pantoken-pc-track`	`<color>`	—	El color de la pista no rellena.
`--value`	`<number>`	—	El valor de progreso actual; registrado con @property para que pueda transicionar.
`--value-max`	`<number>`	—	@alias {@link --max} El valor máximo de progreso (predeterminado `100`).
`--value-now`	`<number>`	—	@alias Alias de `--value`.

Animaciones

Animación	Descripción
`pantoken-progress-circle-indeterminate`	—

Tokens consumidos

Token	Tipo	Valor
`--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`

Compatibilidad con navegadores

Registra las propiedades numéricas de progreso con @property y pinta con CSS mask y conic-gradient; cuando las transiciones de propiedades personalizadas no son compatibles, el anillo aún se renderiza pero no animará.

Relacionado

progress — La forma lineal en barra del mismo progreso determinista.

pantoken

postcss

typedoc

vite

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

CSS: progress-circle ​

Accesibilidad ​

Uso ​

Ejemplos ​

Nested label ​

External label ​

Estructura ​

Modificadores ​

Partes ​

Pseudoelementos ​

Estados ​

Propiedades personalizadas ​

Animaciones ​

Tokens consumidos ​

Compatibilidad con navegadores ​

Relacionado ​