Progress

Displays an indicator showing the completion progress of a task.

How to Import

Add this import to your component file

app/page.tsx

1import { Progress } from "@/components/lightswind/progress";

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

value	number	-	The progress value between 0 and 100	Optional
max	number	100	The maximum value of the progress	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { Progress } from "@/components/lightswind/progress";
2
3export function ProgressDemo() {
4  return <Progress value={60} />;
5}

Variants

Different visual and behavioral variants of the component

Determinate Variant

A progress bar reflecting a specific percentage loading completion.

33%

Progress percentage: 33% (automatically increments)

Previouspopover

Nextsheet

A product byＭＵＨＩＬＡＮ and Team❤️.

Progress

Displays an indicator showing the completion progress of a task.

...

How to Import

Add this import to your component file

app/page.tsx

1import { Progress } from "@/components/lightswind/progress";

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

value	number	-	The progress value between 0 and 100	Optional
max	number	100	The maximum value of the progress	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { Progress } from "@/components/lightswind/progress";
2
3export function ProgressDemo() {
4  return <Progress value={60} />;
5}

Variants

Different visual and behavioral variants of the component

Determinate Variant

A progress bar reflecting a specific percentage loading completion.

33%

Progress percentage: 33% (automatically increments)

Previouspopover

Nextsheet

A product byＭＵＨＩＬＡＮ and Team❤️.

Progress

How to Import

Props

Basic Usage

Variants

Determinate Variant

On This Page

Contribute

Progress

How to Import

Props

Basic Usage

Variants

Determinate Variant

On This Page

Contribute

React Progress Component - Lightswind UI

Key Details of React Progress

Progress

How to Import

Props

Basic Usage

Variants

Determinate Variant

On This Page

Contribute

Progress

How to Import

Props

Basic Usage

Variants

Determinate Variant

On This Page

Contribute