ProgressRing

Ação e status

Progresso circular com o percentual no centro, para contadores de etapas (2 de 4).

Substitui no Brain:fp-prog-round

Contador de etapas

25%

1 de 4

50%

2 de 4

75%

3 de 4

100%

concluído

25%

1 de 4

50%

2 de 4

75%

3 de 4

100%

concluído

import { ProgressRing } from "@paytime/ui";

export default function Example() {
  return (
    <div className="flex flex-wrap gap-7">
      <ProgressRing value={25} label="1 de 4" />
      <ProgressRing value={50} label="2 de 4" />
      <ProgressRing value={75} label="3 de 4" />
      <ProgressRing value={100} label="concluído" />
    </div>
  );
}