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.
Playground
<ply-progress [value]="65" color="primary" size="md">Progress</ply-progress>
Hover (or focus) the bar to see the value tip at the leading edge of the fill. Use [showTip]="false" to hide it.
<ply-progress value="45"></ply-progress> <ply-progress value="45" [showTip]="false"></ply-progress>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add progress
// Paths are relative to aliases.components (default: src/app/components)
import { ProgressComponent } from './progress/progress.component';
@Component({
selector: 'app-progress-example',
imports: [
ProgressComponent
],
template: `...`
})
export class ProgressExampleComponent {}Install
npx ply-ui-cli add progress
Use size="" and define size with supported "sm", "lg", "xl" sizes.
<ply-progress class="mb-4 block" value="23" size="sm"> </ply-progress> <ply-progress class="mb-4 block" value="36"> </ply-progress> <ply-progress class="mb-4 block" value="48" size="lg"> </ply-progress> <ply-progress class="mb-4 block" value="84" size="xl"> </ply-progress>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add progress
// Paths are relative to aliases.components (default: src/app/components)
import { ProgressComponent } from './progress/progress.component';
@Component({
selector: 'app-progress-example',
imports: [
ProgressComponent
],
template: `...`
})
export class ProgressExampleComponent {}Install
npx ply-ui-cli add progress
Use attribute color to control the color of the progress bar. Supported colors are "primary", "danger", "warning", "success" and "accent"
<ply-progress color="primary" value="23"></ply-progress> <ply-progress color="success" value="36"></ply-progress> <ply-progress color="danger" value="48"></ply-progress> <ply-progress color="warning" value="84"></ply-progress> <ply-progress color="accent" value="67"></ply-progress>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add progress
// Paths are relative to aliases.components (default: src/app/components)
import { ProgressComponent } from './progress/progress.component';
@Component({
selector: 'app-progress-example',
imports: [
ProgressComponent
],
template: `...`
})
export class ProgressExampleComponent {}Install
npx ply-ui-cli add progress
Run the following command to add this component to your project:
npx ply-ui-cli add progress
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-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 | Member | Type | Default | Description |
|---|---|---|---|---|
ply-progress | value | number | 0 | Current progress value from 0 to 100. |
ply-progress | color | ProgressColor | 'primary' | Semantic color of the fill. |
ply-progress | size | ProgressSize | 'md' | Height / thickness of the bar. |
ply-progress | showTip | boolean | true | When true (default), hovering the bar shows the value in a tip at the fill edge. |
ply-progress | class | string | '' | Extra host classes merged via `cn()`. |
Content