Progress Ring

Un progress ring es un indicador circular que comunica el progreso de una operación. Establece value para un progreso determinado, o usa indeterminate cuando la duración es desconocida.

Uso

<script>
  import { ProgressRing } from 'fluentui-svelte';
</script>

<ProgressRing value={50} />

Valor

La prop value determina el porcentaje del anillo de progreso que se rellena. Debe ser un número entre 0 y 100.

Ver Código

<ProgressRing value={0} />
<ProgressRing value={25} />
<ProgressRing value={50} />
<ProgressRing value={75} />
<ProgressRing value={100} />

Indeterminado

La prop indeterminate permite que el anillo de progreso muestre un estado indeterminado, lo cual es útil cuando no se puede determinar el progreso.

Ver Código

<ProgressRing indeterminate />
<ProgressRing indeterminate status="paused" />
<ProgressRing indeterminate status="error" />

Ocultar riel

La prop hideRail permite ocultar el riel del anillo de progreso, que es la pista de fondo del indicador de progreso.

Ver Código

<ProgressRing value={50} hideRail />
<ProgressRing value={75} hideRail />
<ProgressRing value={100} hideRail />

Estado

La prop status te permite establecer el estado del anillo de progreso para dar retroalimentación visual. Acepta valores como 'paused' o 'error'.

Ver Código

<ProgressRing value={40} />
<ProgressRing value={50} status="paused" />
<ProgressRing value={75} status="error" />

Propiedades del componente

Name	Type	Default	Description
`value` bindable	`number`	`0`	El valor actual del anillo de progreso.
`min`	`number`	`0`	El valor mínimo del anillo de progreso.
`max`	`number`	`100`	El valor máximo del anillo de progreso.
`indeterminate`	`boolean`		Gira el anillo de forma continua en lugar de reportar un valor.
`hideRail`	`boolean`		Si se oculta el elemento rail.
`size`	`number`	`32`	El tamaño del anillo de progreso en píxeles.
`ref` bindable	`SVGElement`		La referencia del DOM del elemento anillo de progreso.
`railElement` bindable	`SVGCircleElement`		La referencia del DOM del elemento del riel.
`trackElement` bindable	`SVGCircleElement`		La referencia del DOM del elemento de la pista.
`status`	`'paused'` \| `'error'`		El estado actual del anillo de progreso, que recolorea el track.
`class`	`string`		La clase que se aplica al anillo de progreso.
Element Attributes