diff --git a/src/v1/base/Loading.tsx b/src/v1/base/Loading.tsx
index 6d61e66b..b114c8ed 100644
--- a/src/v1/base/Loading.tsx
+++ b/src/v1/base/Loading.tsx
@@ -50,6 +50,6 @@ const LoadingDot = ({
   animationStep?: AnimationStep;
 }) => (
   <span
-    className={`h-[1rem] w-[1rem] rounded-full ${schemes[color]} ${animations[animationStep]}`}
+    className={`h-[1rem] w-[1rem] rounded-full ${schemes[color]} ${animations[animationStep]} translate-y-[5px] opacity-20`}
   ></span>
 );
diff --git a/tailwind.config.js b/tailwind.config.js
index 8b5c65e1..1daed3bf 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -95,14 +95,14 @@ module.exports = {
           to: { transform: 'translateY(300%)' },
         },
         'dot-flash': {
-          '0%': {
-            opacity: 1,
-            transform: 'translateY(0px)',
-          },
-          '50%,100%': {
+          '0%,33%,100%': {
             opacity: 0.2,
             transform: 'translateY(5px)',
           },
+          '16%': {
+            opacity: 1,
+            transform: 'translateY(0px)',
+          },
         },
       },
       animation: {
@@ -110,9 +110,9 @@ module.exports = {
         'slide-in': '0.3s forwards slide-in ease-in-out',
         'slide-out': '0.3s forwards slide-out ease-in-out',
         'slide-init': '0.3s forwards slide-init ease-in-out',
-        'dot-flash': '1s infinite dot-flash alternate',
-        'dot-flash-delay-0.5': '1s 0.5s infinite dot-flash alternate',
-        'dot-flash-delay-1': '1s 1s infinite dot-flash alternate',
+        'dot-flash': '2s infinite dot-flash linear',
+        'dot-flash-delay-0.5': '2s 0.5s infinite dot-flash linear',
+        'dot-flash-delay-1': '2s 1s infinite dot-flash linear',
       },
     },
   },