Progress

Displays the progress of a task or process with visual feedback.

First release: 1.0.0 Latest update: July 1, 2025 Current version: 1.0.0

React

Angular

Vue

Svelte

HTML

Import

import { PlusProgress } from '@plusui/react';

import { PlusProgressComponent } from '@plusui/angular';

import { PlusProgress } from '@plusui/vue';

import PlusProgress from '@plusui/svelte';

<script src="https://cdn.jsdelivr.net/npm/@plusui/core"></script>

Package

@plusui/react

@plusui/angular

@plusui/vue

@plusui/svelte

@plusui/core

Usage

<PlusProgress />

<plus-progress />

<plus-progress />

<PlusProgress />

<plus-progress />

Docs

Changelog

Progress Changelog

Recent changes and updates for the progress component

📝

No entries found

No changelog entries found for progress component.

The Progress component provides visual feedback about the completion status of ongoing processes. Whether it’s loading times, form submissions, or task completion, this component transforms the user experience by providing real-time visual feedback.

Anatomy

Usage

Basic Example

A basic progress bar with label and caption.

Show code

import { PlusProgress } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusProgress value="50" label="File Upload" caption="Uploading...">
      </PlusProgress>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-progress value="50" label="File Upload" caption="Uploading...">
    </plus-progress>
  `
})
export class ExampleComponent {}

<template>
  <plus-progress value="50" label="File Upload" caption="Uploading...">
  </plus-progress>
</template>

<plus-progress value="50" label="File Upload" caption="Uploading...">
</plus-progress>

<plus-progress value="50" label="File Upload" caption="Uploading...">
</plus-progress>

Status

Use the status prop to apply different color schemes indicating the type or severity of the progress.

Show code

import { PlusProgress } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusProgress value="50" label="Default Progress" caption="Processing...">
      </PlusProgress>
      <PlusProgress value="100" label="Success Progress" caption="Upload complete!" status="success">
      </PlusProgress>
      <PlusProgress value="75" label="Warning Progress" caption="Disk space low..." status="warning">
      </PlusProgress>
      <PlusProgress value="25" label="Error Progress" caption="Upload failed" status="error">
      </PlusProgress>
      <PlusProgress value="60" label="Info Progress" caption="Processing data..." status="info">
      </PlusProgress>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-progress value="50" label="Default Progress" caption="Processing...">
    </plus-progress>
    <plus-progress value="100" label="Success Progress" caption="Upload complete!" status="success">
    </plus-progress>
    <plus-progress value="75" label="Warning Progress" caption="Disk space low..." status="warning">
    </plus-progress>
    <plus-progress value="25" label="Error Progress" caption="Upload failed" status="error">
    </plus-progress>
    <plus-progress value="60" label="Info Progress" caption="Processing data..." status="info">
    </plus-progress>
  `
})
export class ExampleComponent {}

<template>
  <plus-progress value="50" label="Default Progress" caption="Processing...">
  </plus-progress>
  <plus-progress value="100" label="Success Progress" caption="Upload complete!" status="success">
  </plus-progress>
  <plus-progress value="75" label="Warning Progress" caption="Disk space low..." status="warning">
  </plus-progress>
  <plus-progress value="25" label="Error Progress" caption="Upload failed" status="error">
  </plus-progress>
  <plus-progress value="60" label="Info Progress" caption="Processing data..." status="info">
  </plus-progress>
</template>

<plus-progress value="50" label="Default Progress" caption="Processing...">
</plus-progress>
<plus-progress value="100" label="Success Progress" caption="Upload complete!" status="success">
</plus-progress>
<plus-progress value="75" label="Warning Progress" caption="Disk space low..." status="warning">
</plus-progress>
<plus-progress value="25" label="Error Progress" caption="Upload failed" status="error">
</plus-progress>
<plus-progress value="60" label="Info Progress" caption="Processing data..." status="info">
</plus-progress>

<plus-progress value="50" label="Default Progress" caption="Processing...">
</plus-progress>
<plus-progress value="100" label="Success Progress" caption="Upload complete!" status="success">
</plus-progress>
<plus-progress value="75" label="Warning Progress" caption="Disk space low..." status="warning">
</plus-progress>
<plus-progress value="25" label="Error Progress" caption="Upload failed" status="error">
</plus-progress>
<plus-progress value="60" label="Info Progress" caption="Processing data..." status="info">
</plus-progress>

Size

The size prop controls the dimensions of the progress bar.

Show code

import { PlusProgress } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusProgress size="sm" label="Small Progress" caption="Loading..." value="50">
      </PlusProgress>
      <PlusProgress size="md" label="Medium Progress" caption="Processing..." value="50">
      </PlusProgress>
      <PlusProgress size="lg" label="Large Progress" caption="Working..." value="50">
      </PlusProgress>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-progress size="sm" label="Small Progress" caption="Loading..." value="50">
    </plus-progress>
    <plus-progress size="md" label="Medium Progress" caption="Processing..." value="50">
    </plus-progress>
    <plus-progress size="lg" label="Large Progress" caption="Working..." value="50">
    </plus-progress>
  `
})
export class ExampleComponent {}

<template>
  <plus-progress size="sm" label="Small Progress" caption="Loading..." value="50">
  </plus-progress>
  <plus-progress size="md" label="Medium Progress" caption="Processing..." value="50">
  </plus-progress>
  <plus-progress size="lg" label="Large Progress" caption="Working..." value="50">
  </plus-progress>
</template>

<plus-progress size="sm" label="Small Progress" caption="Loading..." value="50">
</plus-progress>
<plus-progress size="md" label="Medium Progress" caption="Processing..." value="50">
</plus-progress>
<plus-progress size="lg" label="Large Progress" caption="Working..." value="50">
</plus-progress>

<plus-progress size="sm" label="Small Progress" caption="Loading..." value="50">
</plus-progress>
<plus-progress size="md" label="Medium Progress" caption="Processing..." value="50">
</plus-progress>
<plus-progress size="lg" label="Large Progress" caption="Working..." value="50">
</plus-progress>

States

Different states for various progress scenarios.

Show code

import { PlusProgress } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusProgress value="75" label="Normal Progress" caption="Uploading files...">
      </PlusProgress>
      <PlusProgress value="30" label="Disabled Progress" caption="Upload paused" disabled>
      </PlusProgress>
      <PlusProgress label="Indeterminate Progress" caption="Loading data..." indeterminate="true">
      </PlusProgress>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-progress value="75" label="Normal Progress" caption="Uploading files...">
    </plus-progress>
    <plus-progress value="30" label="Disabled Progress" caption="Upload paused" disabled>
    </plus-progress>
    <plus-progress label="Indeterminate Progress" caption="Loading data..." indeterminate="true">
    </plus-progress>
  `
})
export class ExampleComponent {}

<template>
  <plus-progress value="75" label="Normal Progress" caption="Uploading files...">
  </plus-progress>
  <plus-progress value="30" label="Disabled Progress" caption="Upload paused" disabled>
  </plus-progress>
  <plus-progress label="Indeterminate Progress" caption="Loading data..." indeterminate="true">
  </plus-progress>
</template>

<plus-progress value="75" label="Normal Progress" caption="Uploading files...">
</plus-progress>
<plus-progress value="30" label="Disabled Progress" caption="Upload paused" disabled>
</plus-progress>
<plus-progress label="Indeterminate Progress" caption="Loading data..." indeterminate="true">
</plus-progress>

<plus-progress value="75" label="Normal Progress" caption="Uploading files...">
</plus-progress>
<plus-progress value="30" label="Disabled Progress" caption="Upload paused" disabled>
</plus-progress>
<plus-progress label="Indeterminate Progress" caption="Loading data..." indeterminate="true">
</plus-progress>

Visual Sections

Layout & Spacing

Light & Dark Mode

Screen Reader:
- The component uses role="progressbar" to indicate its purpose.
- aria-valuemin, aria-valuemax, and aria-valuenow attributes provide current progress information.
- aria-label or aria-labelledby should be used to provide an accessible name.
- For indeterminate progress, aria-valuenow is omitted and aria-valuetext may be used.
Visual Design:
- Sufficient color contrast is maintained between progress fill and background.
- Progress is not solely indicated by color - text labels and percentages provide additional context.
Required Developer Actions:
- Provide meaningful label text that describes what is progressing.
- Use appropriate status values to convey semantic meaning.
- For indeterminate progress, ensure the caption provides context about the ongoing process.

Design System

Plus UI Design System on Figma

Visit

API Reference

Properties

Name	Type	Default	Description	Required
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the progress bar.	No
`value`	`number`	`0`	Current progress value (0 to maxValue).	No
`maxValue`	`number`	`100`	Maximum value for the progress bar.	No
`label`	`string`	`undefined`	Text label displayed with the progress bar.	No
`caption`	`string`	`undefined`	Additional descriptive text below the label.	No
`status`	`'default' \| 'success' \| 'warning' \| 'error' \| 'info'`	`'default'`	Visual status of the progress bar.	No
`statusIcon`	`boolean`	`false`	Whether to show a status icon.	No
`disabled`	`boolean`	`false`	Whether the progress bar is disabled.	No
`indeterminate`	`boolean`	`false`	Whether to show indeterminate progress animation.	No
`valueFormat`	`'percent' \| 'step'`	`'percent'`	Format for displaying the progress value.	No

Events

Name	Payload Type	Description
`plus-change`	`CustomEvent<number>`	Fired when the progress value changes.
`plus-complete`	`CustomEvent<void>`	Fired when progress reaches 100% (maxValue).

CSS Custom Properties

Name	Description
`--progress-bg`	Background color of the progress track.
`--progress-fill`	Color of the progress fill.
`--progress-height`	Height of the progress bar.

Shadow Parts

Name	Description
`base`	The main container element.
`track`	The background track of the progress bar.
`fill`	The filled portion of the progress bar.
`label`	The label text container.
`caption`	The caption text container.

Join the Community

Plus UI is built by the community. Join us on our platforms to contribute, get help, and stay up to date.

Figma GitHub Discord Twitter Open Collective

Progress

Import

Package

Usage

Docs

Changelog

Progress Changelog

No entries found

Anatomy

Usage

Basic Example

Status

Size

States

Visual Sections

Layout & Spacing

Light & Dark Mode

Accessibility (a11y)

Design System

API Reference

Properties

Events

CSS Custom Properties

Shadow Parts

Join the Community