Radial Progress

Indicador de progreso circular con apariencia personalizable.

Importar

import { RadialProgress } from 'asterui'

Ejemplos

Básico

Progreso radial simple con valor.

</>

70%

import { RadialProgress } from 'asterui'

function App() {
  return (
      <RadialProgress value={70} />
    )
}

export default App

Diferentes valores

Progreso radial con varios porcentajes de finalización.

</>

0%

25%

50%

75%

100%

import { RadialProgress } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <RadialProgress value={0} />
        <RadialProgress value={25} />
        <RadialProgress value={50} />
        <RadialProgress value={75} />
        <RadialProgress value={100} />
      </div>
    )
}

export default App

Colores

Progreso radial con diferentes colores.

</>

70%

70%

70%

70%

70%

70%

70%

import { RadialProgress } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <RadialProgress value={70} color="primary" />
        <RadialProgress value={70} color="secondary" />
        <RadialProgress value={70} color="accent" />
        <RadialProgress value={70} color="success" />
        <RadialProgress value={70} color="warning" />
        <RadialProgress value={70} color="error" />
        <RadialProgress value={70} color="info" />
      </div>
    )
}

export default App

Tamaño personalizado

Ajusta el tamaño usando la prop size.

</>

70%

70%

70%

70%

import { RadialProgress } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 items-center flex-wrap">
        <RadialProgress value={70} size={3} />
        <RadialProgress value={70} size={5} />
        <RadialProgress value={70} size={8} />
        <RadialProgress value={70} size={12} />
      </div>
    )
}

export default App

Grosor personalizado

Ajusta el grosor del anillo.

</>

70%

70%

70%

70%

import { RadialProgress } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <RadialProgress value={70} thickness={2} />
        <RadialProgress value={70} thickness={5} />
        <RadialProgress value={70} thickness={10} />
        <RadialProgress value={70} thickness={20} />
      </div>
    )
}

export default App

Contenido personalizado

Muestra contenido personalizado en lugar del porcentaje.

</>

85/100

60

days

import { RadialProgress } from 'asterui'
import { CheckIcon } from '@aster-ui/icons'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <RadialProgress value={85}>
          <div className="text-xs">85/100</div>
        </RadialProgress>
        <RadialProgress value={60}>
          <div className="flex flex-col items-center">
            <div className="text-2xl font-bold">60</div>
            <div className="text-xs">days</div>
          </div>
        </RadialProgress>
        <RadialProgress value={100} color="success">
          <CheckIcon size={32} />
        </RadialProgress>
      </div>
    )
}

export default App

Sin mostrar valor

Oculta el texto del porcentaje.

</>

import { RadialProgress } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <RadialProgress value={30} showValue={false} />
        <RadialProgress value={60} showValue={false} color="primary" />
        <RadialProgress value={90} showValue={false} color="success" />
      </div>
    )
}

export default App

Con fondo

Agrega estilo de fondo y borde.

</>

70%

50%

90%

import { RadialProgress } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <RadialProgress
          value={70}
          color="primary"
          className="bg-primary text-primary-content border-4 border-primary"
        />
        <RadialProgress
          value={50}
          color="secondary"
          className="bg-secondary text-secondary-content border-4 border-secondary"
        />
        <RadialProgress
          value={90}
          color="accent"
          className="bg-accent text-accent-content border-4 border-accent"
        />
      </div>
    )
}

export default App

API

RadialProgress

Propiedad	Descripción	Tipo	Predeterminado
value	Valor de progreso (0-100)	number	-
size	Tamaño en unidades rem o string CSS	string | number	5rem
thickness	Grosor del anillo en píxeles o string CSS	string | number	10% del tamaño
color	Color del progreso	'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral'	-
showValue	Mostrar texto de porcentaje	boolean	true
children	Contenido personalizado a mostrar	React.ReactNode	-
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para pruebas	string	-

Accesibilidad

• Usa role="progressbar" con atributos ARIA apropiados
• El valor se anuncia como porcentaje a lectores de pantalla
• El contenido personalizado puede incluir etiquetas accesibles adicionales