Feedback - Twenty — ContextQMD

Indicates progress or countdown and moves from right to left.

jsx

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

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

</Tab> <Tab title="Props">

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`

</Tab> </Tabs>

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.

jsx

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

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

</Tab> <Tab title="Props">

Props	Type	Description	Default
size	number	The size of the circular progress bar	50
barWidth	number	The width of the progress bar line	5
barColor	string	The color of the progress bar	currentColor

</Tab> </Tabs>