Radial Progress

Indicador de progresso circular com aparência customizável.

Importação

import { RadialProgress } from 'asterui'

Exemplos

Básico

Progresso radial simples com valor.

</>

70%

import { RadialProgress } from 'asterui'

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

export default App

Diferentes Valores

Progresso radial com várias porcentagens de conclusão.

</>

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

Cores

Progresso radial com diferentes cores.

</>

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

Tamanho Customizado

Ajusta tamanho usando a 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

Espessura Customizada

Ajusta espessura do anel.

</>

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

Conteúdo Customizado

Exibe conteúdo customizado em vez de porcentagem.

</>

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

Sem Exibição de Valor

Oculta o texto de porcentagem.

</>

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

Com Fundo

Adiciona estilo de fundo e borda.

</>

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

Propriedade	Descrição	Tipo	Padrão
value	Valor de progresso (0-100)	number	-
size	Tamanho em unidades rem ou string CSS	string | number	5rem
thickness	Espessura do anel em pixels ou string CSS	string | number	10% do tamanho
color	Cor do progresso	'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral'	-
showValue	Mostrar texto de porcentagem	boolean	true
children	Conteúdo customizado para exibir	React.ReactNode	-
className	Classes CSS adicionais	string	-
data-testid	ID de teste para testes	string	-

Acessibilidade

• Usa role="progressbar" com atributos ARIA apropriados
• Valor é anunciado como porcentagem aos leitores de tela
• Conteúdo customizado pode incluir rótulos acessíveis adicionais