Creative Tim UICreative Tim UI

Shadcn Progress

PreviousNext

A progress bar component that displays the completion status of a task or process, perfect for file uploads, form completion, and loading states.

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

export function ProgressDemo() {
  return <Progress value={50} />
}

Installation

pnpm dlx @creative-tim/ui@latest add progress

Usage

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

Examples

Progress Colors

Progress components with different color schemes (primary, secondary, info, success, warning, error) to visually distinguish between different progress states and provide visual variety.

import { cn } from "@/lib/utils"
import { Progress } from "@/components/ui/progress"

export function ProgressColors() {
  return (
    <div className="w-full space-y-4">
      <Progress
        value={50}
        className={cn(
          "bg-primary/20 [&>[data-slot=progress-indicator]]:bg-primary"
        )}
      />
      <Progress
        value={50}
        className={cn(
          "bg-secondary/20 [&>[data-slot=progress-indicator]]:bg-secondary"
        )}
      />
      <Progress
        value={50}
        className={cn(
          "bg-blue-500/20 [&>[data-slot=progress-indicator]]:bg-blue-500"
        )}
      />
      <Progress
        value={50}
        className={cn(
          "bg-green-500/20 [&>[data-slot=progress-indicator]]:bg-green-500"
        )}
      />
      <Progress
        value={50}
        className={cn(
          "bg-yellow-500/20 [&>[data-slot=progress-indicator]]:bg-yellow-500"
        )}
      />
      <Progress
        value={50}
        className={cn(
          "bg-destructive/20 [&>[data-slot=progress-indicator]]:bg-destructive"
        )}
      />
    </div>
  )
}

Progress Sizes

Progress components in different sizes (small, medium, large) to accommodate various design needs and improve visual hierarchy.

import { cn } from "@/lib/utils"
import { Progress } from "@/components/ui/progress"

export function ProgressSizes() {
  return (
    <div className="w-full space-y-6">
      <Progress value={50} className={cn("h-1")} />
      <Progress value={50} className={cn("h-2")} />
      <Progress value={50} className={cn("h-3")} />
    </div>
  )
}

Progress Label Outside

A progress component with a label displayed outside the progress bar, showing the task name and completion percentage above the bar.

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

export function ProgressLabelOutside() {
  return (
    <div className="w-full space-y-2">
      <div className="flex items-center justify-between font-semibold">
        <span>Completed</span>
        <span>50%</span>
      </div>
      <Progress value={50} />
    </div>
  )
}

Progress Label Inside

A progress component with a label displayed inside the progress bar, showing the completion percentage within the filled portion of the bar.

50% Completed
"use client"

import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"

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

export function ProgressLabelInside() {
  const value = 50

  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      value={value}
      className={cn(
        "bg-primary/20 relative h-3 w-full overflow-hidden rounded-full"
      )}
    >
      <ProgressPrimitive.Indicator
        data-slot="progress-indicator"
        className="bg-primary relative flex h-full w-full flex-1 items-center justify-center transition-all"
        style={{ transform: `translateX(-${100 - value}%)` }}
      >
        <span className="text-secondary-foreground absolute text-xs font-medium">
          50% Completed
        </span>
      </ProgressPrimitive.Indicator>
    </ProgressPrimitive.Root>
  )
}

Custom Progress Styles

A progress component with custom styling that demonstrates how to personalize the appearance to match your brand or design requirements, such as custom borders, padding, and rounded corners.

import { cn } from "@/lib/utils"
import { Progress } from "@/components/ui/progress"

export function ProgressCustomStyles() {
  return (
    <Progress
      value={50}
      className={cn(
        "border border-gray-900/10 bg-gray-900/5 p-1 dark:border-gray-800 dark:bg-gray-900 [&>[data-slot=progress-indicator]]:rounded-full"
      )}
    />
  )
}

Props

The progress component is built using Radix UI's Progress primitive and accepts the following props:

Progress

PropTypeDefaultDescription
valuenumber-The current progress value (0-100)
maxnumber100The maximum value of the progress
classNamestring-Additional CSS classes to apply to the progress bar
aria-labelstring-Accessible label for screen readers
aria-valueminnumber0The minimum value for the progress (for accessibility)
aria-valuemaxnumber100The maximum value for the progress (for accessibility)
aria-valuenownumber-The current value for the progress (for accessibility)

Accessibility

The progress component follows accessibility best practices:

  • Uses proper ARIA attributes for screen readers
  • Supports aria-label for descriptive labels
  • Provides aria-valuemin, aria-valuemax, and aria-valuenow for proper value communication
  • Maintains proper semantic HTML structure
  • Works well with screen readers to announce progress updates
  • Provides visual feedback that is also accessible to assistive technologies

Best Practices

  • Use progress bars to show completion status of tasks or processes
  • Update the value dynamically to reflect real-time progress
  • Provide clear labels that describe what is being tracked
  • Use appropriate colors to indicate different states (e.g., success, warning, error)
  • Consider using labels inside or outside the bar based on your design needs
  • Ensure sufficient contrast between the progress bar and background
  • Use appropriate sizes based on the importance and context of the progress indicator
  • Update progress values smoothly to avoid jarring visual changes
  • Consider using animations for better user experience
  • Test with screen readers to ensure progress announcements are clear

The progress component provides a clean and accessible way to display task completion status. It's ideal for file uploads, form completion, loading states, data processing, and any interface where users need visual feedback about ongoing operations.