feat: add animated border loader css class

tailwind.config.js

@@ -75,17 +75,48 @@ module.exports = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: 0 },
         },
+        'gradient-x': {
+          '0%': {
+            'background-position': '200% 0',
+          },
+          '100%': {
+            'background-position': '-200% 0',
+          },
+        },
+      },
+      backgroundSize: {
+        'auto-200': '200% auto',
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
         "overlayShow": 'overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
         "contentShow": 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+        'gradient-x': 'gradient-x 3s linear infinite',
       },
     },
   },
   plugins: [
     require("tailwindcss-animate"),
     require("@tailwindcss/typography"),
+    function({ addUtilities }) {
+      const newUtilities = {
+        '.animated-loading-bar': {
+          position: 'relative',
+          '&::after': {
+            content: '""',
+            position: 'absolute',
+            bottom: '0',
+            left: '0',
+            right: '0',
+            height: '2px',
+            backgroundImage: 'linear-gradient(90deg, #3B82F6, #8B5CF6, #EC4899, #3B82F6)',
+            backgroundSize: '200% 100%',
+            animation: 'gradient-x 3s linear infinite',
+          },
+        },
+      }
+      addUtilities(newUtilities, ['responsive', 'hover'])
+    }
   ],
 }