Resumen
ProgressRing proporciona una apariencia circular para Progress. Comparte el rango personalizado, el valor nulo, el formato, el etiquetado, la propiedad nativa, la referencia y el contrato de renderizado de la raíz. Los elementos secundarios opcionales muestran un valor preformateado junto al anillo.
Uso
Proporciona el valor controlado sin procesar y un nombre accesible. Usearia-valuetext cuando un valor con formato explique el progreso con más claridad que un porcentaje.
aria-labelledby para asociar el anillo con una etiqueta visible existente o compón Progress.Label como elemento secundario. Los elementos secundarios preformateados no proporcionan automáticamente el nombre accesible del anillo.
Progreso y rangos controlados
La aplicación calculavalue y formatea el contenido mostrado. El anillo no obtiene datos, no avanza el progreso ni calcula cuotas. min tiene como valor predeterminado 0 y max tiene como valor predeterminado 100. Los valores finitos se limitan al rango para los valores semánticos y la geometría del arco. El arco se rellena según el porcentaje normalizado, incluso cuando el mínimo no es cero.
Pasa value={null} para el progreso indeterminado. El anillo omite aria-valuenow y muestra un arco indeterminado. Los valores no finitos también permanecen indeterminados; no se convierten en cero ni en finalización. El contenido mostrado sigue estando controlado por la aplicación.
Usa locale, format y getAriaValueText como se describe en Progress. Compón Progress.Value para mostrar el valor formateado de la raíz.
Usa ProgressBar para el progreso horizontal o MetricRow para una etiqueta y un valor alineado.
Apariencia y composición
size="md" representa un anillo de 16 px; size="sm" representa un anillo de 14 px. Ambos usan un trazo de 2 px y se rellenan en el sentido de las agujas del reloj desde la parte superior. barColor acepta colores CSS, incluidas las variables de tema. El SVG es decorativo y está oculto para las API de accesibilidad.
Los cambios de valor se animan durante 300 ms. Las preferencias de movimiento reducido desactivan la transición y la rotación indeterminada. Los atributos nativos, className, style y ref se aplican al elemento de progreso externo. className y style pueden recibir el estado del progreso. render puede reemplazar la raíz y conservar su semántica.
”Props”
string
Accessible name identifying the measured operation.
string
ID of the visible label that names the operation.
string
Human-readable progress value overriding the default formatted value.
string
CSS color of the filled arc. Defaults to the blue theme color.
ReactNode
Optional preformatted value or Progress parts displayed before the ring.
string | ((state: ProgressRootState) => string | undefined)
Class applied to the progress root, or a callback receiving its status.
NumberFormatOptions
Intl.NumberFormat options for the clamped numeric value. The default displays the normalized percentage.
((formattedValue: string, value: number | null) => string)
Receives the formatted value and raw value, including null, and returns an accessible value description.
LocalesArgument
Locale or locale list used to format the value. Defaults to the runtime locale.
number
predeterminado:"100"
Inclusive maximum. Defaults to 100.
number
predeterminado:"0"
Inclusive minimum. Defaults to 0.
Ref<HTMLDivElement>
Ref to the root div, or the element composed through render.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ProgressRootState>
Composes the root with an element or render callback. Forward the supplied props and ref to retain progress semantics.
"md" | "sm"
predeterminado:"md"
Ring diameter: sm (14px) or md (16px). Defaults to md.
CSSProperties | ((state: ProgressRootState) => CSSProperties | undefined)
Inline styles applied to the progress root, or a callback receiving its status.
number | null
requerido
Controlled value in the min/max range. Use null for indeterminate progress.