[FIX] Loading 문구 dots 애니메이션 정상 구현

GarlicB · May 13, 2023 · 89c8d0f · 89c8d0f
1 parent 551a9f8
commit 89c8d0f
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/src/components/pages/Post.tsx b/src/components/pages/Post.tsx
@@ -36,7 +36,7 @@ export const Post: React.FC = () => {
       {isLoading ? (
         <div className="loading">
           <span>Loading</span>
-          <span className="loading-dots">...</span>
+          <span className="loading-dots" />
         </div>
       ) : mdSource ? (
         <>

diff --git a/src/main.css b/src/main.css
@@ -135,8 +135,9 @@ a {
   font-weight: bold;
 }
 
-.loading-dots {
-  animation: loadingDots 0.5s linear infinite;
+.loading-dots::after {
+  content: ".";
+  animation: loadingDots 0.7s linear infinite;
 }
 
 @keyframes loadingDots {
@@ -146,12 +147,10 @@ a {
   33% {
     content: "..";
   }
+
   66% {
     content: "...";
   }
-  100% {
-    content: ".";
-  }
 }
 
 .markdown {