style: add animation to progress bar

Nexters · Aug 4, 2023 · 0b9a61c · 0b9a61c
1 parent f49d519
commit 0b9a61c
Showing 1 changed file with 10 additions and 0 deletions.
diff --git 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 {