Progress

Indicar progresso determinado de uma tarefa.

Ações e indicadores

40%

Código da demo

"use client";

import * as React from "react";
import { Progress } from "@/components/ui/progress";

export function Demo() {
  const [value, setValue] = React.useState(40);

  React.useEffect(() => {
    const id = window.setInterval(() => {
      setValue((v) => (v >= 100 ? 20 : v + 10));
    }, 1200);
    return () => window.clearInterval(id);
  }, []);

  return (
    <div className="w-full max-w-sm space-y-fe-2">
      <Progress value={value} />
      <p className="fe-caption text-muted-foreground">{value}%</p>
    </div>
  );
}

Acessibilidade: aria-valuenow/min/max; texto auxiliar do percentual.
Importar: import { Progress } from "@financeequity/ui/progress"
Neste repositório:
import { Progress } from "@/components/ui/progress"
Dependências: radix-ui