- improve: bounce animation for dots loader (#75)

dcSpark · Nov 8, 2023 · 68429c2 · 68429c2
1 parent 216d088
commit 68429c2
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/apps/shinkai-visor/src/components/inbox/inbox.tsx b/apps/shinkai-visor/src/components/inbox/inbox.tsx
@@ -325,7 +325,7 @@ export const Inbox = () => {
               <span>
                 <FormattedMessage id="file-processing-alert-description" />
               </span>
-              <DotsLoader className="w-4 h-4"></DotsLoader>
+              <DotsLoader className="w-6 h-full"></DotsLoader>
             </div>
           </AlertDescription>
           <Terminal className="h-4 w-4" />

diff --git a/apps/shinkai-visor/src/components/ui/dots-loader.tsx b/apps/shinkai-visor/src/components/ui/dots-loader.tsx
@@ -2,9 +2,9 @@ const DotsLoader = ({ className }: { className?: string }) => {
   return (
     <div className={`${className} flex flex-col justify-center`}>
       <div className="flex flex-row space-x-1 items-center justify-center">
-        <div className="h-1 w-1 rounded-full bg-slate-100 animate-bounce [animation-delay:-0.3s]"></div>
-        <div className="h-1 w-1 rounded-full bg-slate-100 animate-bounce [animation-delay:-0.15s]"></div>
-        <div className="h-1 w-1 rounded-full bg-slate-100 animate-bounce"></div>
+        <div className="h-1 w-1 rounded-full bg-slate-100 animate-big-bounce [animation-delay:-0.3s]"></div>
+        <div className="h-1 w-1 rounded-full bg-slate-100 animate-big-bounce [animation-delay:-0.6s]"></div>
+        <div className="h-1 w-1 rounded-full bg-slate-100 animate-big-bounce [animation-delay:-0.9s]"></div>
       </div>
     </div>
   );

diff --git a/apps/shinkai-visor/tailwind.config.js b/apps/shinkai-visor/tailwind.config.js
@@ -92,11 +92,22 @@ module.exports = {
           '0%, 100%': { transform: 'opacity: 1' },
           '50%': { transform: 'opacity: .5' },
         },
+        'big-bounce': {
+          '0%, 100%': {
+            transform: 'translateY(-75%)',
+            'animation-timing-function': 'cubic-bezier(0.8, 0, 1, 1)',
+          },
+          '50%': {
+            transform: 'translateY(0)',
+            'animation-timing-function': 'cubic-bezier(0, 0, 0.2, 1)',
+          }
+        }
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
         breath: 'pulse 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;',
+        'big-bounce': 'big-bounce 1s infinite',
       },
       fontFamily: {
         inter: ['Inter', ...defaultTheme.fontFamily.sans],