Negocios

Progress

Barra de progresso para comunicar o avanço de uma tarefa, upload, carregamento ou etapa de formulário.

Visão geral

O Progress exibe visualmente o percentual de conclusão de uma tarefa.

Valores diferentes

Progresso

0%

x

Progresso

25%

x

Progresso

50%

x

Progresso

75%

x

Progresso

100%

x

Import

import { Progress } from "@/components/ui/progress"

Tamanhos e cores

Customize a altura e cor via className.

Fina (h-1)

x

Padrão (h-2)

x

Grossa (h-3)

x

Sucesso

x

Destrutivo

x

Padrão de implementação

Snippets para uso dinâmico do Progress.

Progress básico

import { Progress } from "@/components/ui/progress"

<Progress value={75} className="h-2" />

Progress animado

"use client"
import { useEffect, useState } from "react"

export function ProgressAnimado() {
  const [progress, setProgress] = useState(0)

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

  return <Progress value={progress} className="h-2 transition-all duration-700" />
}

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter