diff --git a/src/App.js b/src/App.js
index 414f1c7..dc36917 100644
--- a/src/App.js
+++ b/src/App.js
@@ -75,6 +75,7 @@ import TestComponentNew from "./components/TestComponentNew";
import CardTrelloDesign from "./components/CardTrelloDesign";
import CircleInCircle from "./components/CircleInCircle";
import NewTagDesign from "./components/NewTagDesign";
+import AnimatedProgressBar from "./components/AnimatedProgressBar";
// import Digikala from "./components/Digikala/ImageSlider";
@@ -156,6 +157,7 @@ function App() {
{/* */}
{/* */}
+ {/* */}
{/* */}
{/* */}
diff --git a/src/components/AnimatedProgressBar/index.js b/src/components/AnimatedProgressBar/index.js
new file mode 100644
index 0000000..e56c6b8
--- /dev/null
+++ b/src/components/AnimatedProgressBar/index.js
@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from "react";
+
+const AnimatedProgressBar = ({rangeWidth, parentBg, childBg}) => {
+ const [progressBar, setProgressBar] = useState(false);
+
+ useEffect(() => {
+ setTimeout(() => {
+ setProgressBar(true);
+ }, 1000);
+ }, []);
+
+ return (
+
)
+}
+
+export default AnimatedProgressBar
+
+AnimatedProgressBar.defaultProps = {
+ rangeWidth: "75%",
+ parentBg: "bg-gray-200",
+ childBg: "bg-gray-600",
+}
\ No newline at end of file
diff --git a/src/components/CardTrelloDesign/index.js b/src/components/CardTrelloDesign/index.js
index 983683a..b499ef6 100644
--- a/src/components/CardTrelloDesign/index.js
+++ b/src/components/CardTrelloDesign/index.js
@@ -10,6 +10,7 @@ import clock from "./images/clock.svg";
import nike from "./images/nike.svg";
import messageText from "./images/message-text.svg";
import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther";
+import AnimatedProgressBar from "../AnimatedProgressBar";
const CardTrelloDesign = ({ circle, pictures }) => {
return (
@@ -118,6 +119,8 @@ const CardTrelloDesign = ({ circle, pictures }) => {
/>
+ {/* progressBar */}
+
);
};
diff --git a/src/components/NewTagDesign/index.js b/src/components/NewTagDesign/index.js
index 5eaf895..d8392fa 100644
--- a/src/components/NewTagDesign/index.js
+++ b/src/components/NewTagDesign/index.js
@@ -9,6 +9,7 @@ const NewTagDesign = ({
tagBorderColor,
icon,
fontSize,
+ fontWeight,
border,
borderRadius,
iconWidth,
@@ -20,7 +21,7 @@ const NewTagDesign = ({
}) => {
return (