Migrate to twenty-ui - feedback/progress-bar (#8002)

This PR was created by [GitStart](https://gitstart.com/) to address the
requirements from this ticket:
[TWNTY-7527](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7527).

 --- 

### Description

Migrate `feedback/progress-bar` to twenty ui:

- CircularProgressBar
- ProgressBar

### Demo

ProgressBar on Storybook


![](https://assets-service.gitstart.com/4814/10b11cf5-e52e-420c-b70b-274c532f5f94.png)

CircularProgressBar on Storybook


![](https://assets-service.gitstart.com/4814/e483d3db-1b4c-4062-af40-c596c406c221.png)

###### Fixes twentyhq/private-issues#91

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-ui/src/feedback/progress-bar/components/ProgressBar.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+
+export type ProgressBarProps = {
+  className?: string;
+  color?: string;
+  value: number;
+};
+
+export type StyledBarProps = {
+  className?: string;
+};
+
+const StyledBar = styled.div<StyledBarProps>`
+  height: ${({ theme }) => theme.spacing(2)};
+  overflow: hidden;
+  width: 100%;
+`;
+
+const StyledBarFilling = styled(motion.div)<{ color?: string }>`
+  background-color: ${({ color, theme }) => color ?? theme.font.color.primary};
+  height: 100%;
+`;
+
+export const ProgressBar = ({ className, color, value }: ProgressBarProps) => {
+  const [initialValue] = useState(value);
+
+  return (
+    <StyledBar
+      className={className}
+      role="progressbar"
+      aria-valuenow={Math.ceil(value)}
+    >
+      <StyledBarFilling
+        initial={{ width: `${initialValue}%` }}
+        animate={{ width: `${value}%` }}
+        color={color}
+        transition={{ ease: 'linear' }}
+      />
+    </StyledBar>
+  );
+};