Components

Display

Feedback

Input

Navigation

Developers

UI Components

Feedback

In this article

Indicates progress or countdown and moves from right to left.

Usage

Props

import { ProgressBar } from "@/ui/feedback/progress-bar/components/ProgressBar";

export const MyComponent = () => {
  return (
    <ProgressBar
      duration={6000}
      delay={0}
      easing="easeInOut"
      barHeight={10}
      barColor="#4bb543"
      autoStart={true}
    />
  );
};

Circular Progress Bar

Indicates the progress of a task, often used in loading screens or areas where you want to communicate ongoing processes to the user.

Usage

Props

import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";

export const MyComponent = () => {
  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};

Noticed something to change?

As an open-source company, we welcome contributions through Github. Help us keep it up-to-date, accurate, and easy to understand by getting involved and sharing your ideas!

Edit Content