From 0b9a61c4075f453984c0cdfce4815d8ecd405ed3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=98=88=EC=A7=84?= <orobos654@gmail.com>
Date: Sat, 5 Aug 2023 00:29:44 +0900
Subject: [PATCH] style: add animation to progress bar

---
 src/client/view/share/components/HeaderSection.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/client/view/share/components/HeaderSection.tsx b/src/client/view/share/components/HeaderSection.tsx
index b71409c..7ab5866 100644
--- a/src/client/view/share/components/HeaderSection.tsx
+++ b/src/client/view/share/components/HeaderSection.tsx
@@ -93,6 +93,15 @@ const progressContainer = css`
   border-radius: 5px;
   background-color: var(--color-100);
 
+  @keyframes progress {
+    from {
+      width: 0;
+    }
+    to {
+      width: calc(var(--progress-ratio) * 1%);
+    }
+  }
+
   &::before {
     content: '';
     position: absolute;
@@ -102,6 +111,7 @@ const progressContainer = css`
     height: 100%;
     border-radius: 5px;
     background: var(--main-color);
+    animation: progress 0.8s ease-in-out;
   }
 
   progress {