Feedback

Indicates progress or countdown and moves from right to left.

Usage
Props

import { ProgressBar } from "twenty-ui/feedback";

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

Props	Type	Description	Default
duration	number	The total duration of the progress bar animation in milliseconds	3
delay	number	The delay in starting the progress bar animation in milliseconds	0
easing	string	Easing function for the progress bar animation	easeInOut
barHeight	number	The height of the bar in pixels	24
barColor	string	The color of the bar	gray80
autoStart	boolean	If `true`, the progress bar animation starts automatically when the component mounts	`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" />;
};

Welcome

Core Concepts

Circular Progress Bar

​Circular Progress Bar

Circular Progress Bar