Progresso

Uma barra fina que vai se preenchendo à medida que uma tarefa é concluída — uploads, instalações, integração em várias etapas — com aquele estilo neobrutalista de bordas e sombras.

"use client"

import * as React from "react"

A barra de progresso informa quanto de uma tarefa já foi concluído — uma trilha que se preenche de 0 a 100. Construída sobre o componente Base UI Progress e estilizada seguindo a receita neobrutalista: borda grossa, sombra dura, preenchimento sólido.

Quando usar:

Uploads e downloads de arquivos — progresso determinado, guiado por bytes, com porcentagem visível.
Fluxos em várias etapas — onboarding, checkout e assistentes; a barra mostra até onde o usuário chegou.
Tarefas demoradas — importações, exportações e instalações que reportam a conclusão a partir do servidor.

Instalação


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/progress.json
npx shadcn@latest add https://neobrutalism.com/r/base/progress.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/progress.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/progress.json

Instale as seguintes dependências:


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

Copie e cole o código a seguir no seu projeto.

components/ui/progress.tsx

"use client"

import * as React from "react"
import { Progress as ProgressPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Progress({
  className,
  value,
  ...props
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      className={cn(
        "relative flex h-4 w-full items-center overflow-hidden rounded border-2 bg-background",
        className
      )}
      {...props}
    >
      <ProgressPrimitive.Indicator
        data-slot="progress-indicator"
        className="size-full flex-1 bg-primary transition-all"
        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
      />
    </ProgressPrimitive.Root>
  )
}

export { Progress }

Atualize os caminhos de importação conforme a configuração do seu projeto.

Uso

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

<Progress value={33} />

Composição

Com rótulo e valor

Use ProgressLabel e ProgressValue para exibir um rótulo e um valor.

import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"
 
;<Progress value={56} className="w-full max-w-sm">
  <ProgressLabel>Upload progress</ProgressLabel>
  <ProgressValue />
</Progress>

Progress
├── ProgressLabel
├── ProgressValue
└── ProgressTrack
    └── ProgressIndicator

Exemplos

Rótulo

Use ProgressLabel e ProgressValue para exibir um rótulo e um valor.

Upload progress

import {
  Progress,
  ProgressLabel,

Controlado

Uma barra de progresso que pode ser controlada por um slider.

"use client"

import * as React from "react"

RTL

Para ativar o suporte a RTL no Neobrutalism, consulte o guia de configuração de RTL.

تقدم الرفع

"use client"

import * as React from "react"

Acessibilidade

Progress é um indicador de status, não um controle — nunca recebe foco e não tem interações de teclado. O Base UI renderiza role="progressbar" com aria-valuemin, aria-valuemax e aria-valuenow, e o ProgressLabel é associado automaticamente via aria-labelledby — prefira usá-lo (ou um aria-label) em vez de uma barra sem rótulo, para que os leitores de tela possam dizer o que está sendo carregado, e não apenas a porcentagem. Passe value={null} quando a conclusão for desconhecida; a barra muda para o estado indeterminado.

Referência da API

Consulte a documentação Base UI Progress.