Progress Component

The Progress component provides visual feedback for ongoing processes in your application. With smooth animations and state management, it helps users understand the completion status of tasks.

Key Features

Multiple Sizes: Small, medium, and large variants
State Management: Success and error states
Smooth Animations: Built-in transitions
Accessible: Semantic HTML with ARIA support

Basic Usage

Basic Progress

1
<Progress value={0.5} max={1} label="Basic Progress" />

Variants

Size Options

Small Progress

Medium Progress

Large Progress

1
<Progress value={75} max={100} size="sm" label="Small Progress" />
2
<Progress value={75} max={100} size="md" label="Medium Progress" />
3
<Progress value={75} max={100} size="lg" label="Large Progress" />

State Variants

Success State

Error State

1
<Progress value={100} max={100} data-state="success" label="Success State" />
2
<Progress value={30} max={100} data-state="error" label="Error State" />

Props API

Progress Component Props Extends <progress> HTMLElement
Prop	Type	Default	Description
label	string		Label text for the progress bar
size	'sm' \| 'md' \| 'lg'	md	Size variant of the progress bar

Progress Functions API

The Progress component exposes methods for programmatic control:

1
// Get progress instance
2
const progress = document.querySelector('progress-wrapper');
3

4
// Update progress
5
progress.setProgress(0.75); // Set to 75%
6

7
// Reset progress
8
progress.resetProgress();
9

10
// Set state
11
progress.setState('success');
12
progress.setState('error');

Animated Progress Example

Here’s how to create an animated progress bar:

1
import { ready } from '@/components/NST-components/base';
2
import type { ProgressElement } from '@/components/NST-components/UI/progress/data';
3

4
const progressBars = await ready(
5
  document.querySelector<ProgressElement>('progress-wrapper')
6
);
7

8
function animateProgress() {
9
  let currentValue = 0;
10
  const interval = setInterval(() => {
11
    currentValue += 0.005; // Increment by 0.005 every 20ms
12
    if (progressBars) {
13
      progressBars.progress = currentValue;
14
    }
15

16
    if (currentValue >= 1) {
17
      clearInterval(interval);
18
      // Wait 2 seconds then reset and start again
19
      setTimeout(() => {
20
        if (progressBars) {
21
          progressBars.reset();
22
        }
23
        setTimeout(() => {
24
          animateProgress();
25
        }, 100);
26
      }, 2000);
27
    }
28
  }, 20);
29
}
30

31
// Start the animation
32
animateProgress();

Limited Time Launch Sale

Add professional progress indicators to your website with our AstroJS starter template. Get started now!

GET 60% OFF!

Popover QR Code

Directory