Blips
Documentação

Progress

Exibe um indicador que mostra o progresso de conclusão de uma tarefa, normalmente representado como uma barra de progresso.

"use client";

import { Progress } from "@blips/ui/components/progress";
import { useEffect, useState } from "react";

export default function ProgressDemo() {
  const [progress, setProgress] = useState(13);

  useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500);
    return () => clearTimeout(timer);
  }, []);

  return <Progress value={progress} className="w-[60%]" />;
}

Instalação

pnpm add @blips/ui

Uso

import { Progress } from "@blips/ui/components/progress"
<Progress value={33} />

Exemplos

Exemplo

Uma barra de progresso que atualiza seu valor após a montagem do componente.

"use client";

import { Progress } from "@blips/ui/components/progress";
import { useEffect, useState } from "react";

export default function ProgressDemo() {
  const [progress, setProgress] = useState(13);

  useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500);
    return () => clearTimeout(timer);
  }, []);

  return <Progress value={progress} className="w-[60%]" />;
}

Referência da API

Consulte a documentação do Radix UI Progress.

AnteriorPopoverPróximoRadio Group