Free
Pro

Progress Bar

A progress bar in HTML represents a percentage of certain milestones during a task. HTML can be used to create progress bars that indicate a task's completion.

free

Default Progress Bar

Hover (or focus) the bar to see the value tip at the leading edge of the fill. Use [showTip]="false" to hide it.


HTML

Progress Bar Sizes

Use size="" and define size with supported "sm", "lg", "xl" sizes.


HTML

Progress Bar Colors

Use attribute color to control the color of the progress bar. Supported colors are "primary", "danger", "warning", "success" and "accent"


HTML

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add progress

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add progress
// Paths are relative to aliases.components (default: src/app/components)
import { ProgressComponent } from './progress/progress.component';

@Component({
  selector: 'app-your-component',
  imports: [
    ProgressComponent
  ],
  template: `...`
})
export class YourComponent {}

API for progress — generated from JSDoc in the library source.

API reference for progress
APIMemberTypeDefaultDescription
base-progressvaluenumber0Current progress value from 0 to 100.
base-progresscolorProgressColor'primary'Semantic color of the fill.
base-progresssizeProgressSize'md'Height / thickness of the bar.
base-progressshowTipbooleantrueWhen true (default), hovering the bar shows the value in a tip at the fill edge.
base-progressclassstring''Extra host classes merged via `cn()`.