feat: add ping animation in website realtime visitor

msgbyte · Oct 4, 2024 · 6da0e6f · 6da0e6f
1 parent 9bc8c63
commit 6da0e6f
Showing 1 changed file with 4 additions and 1 deletion.
diff --git a/src/client/components/website/WebsiteOnlineCount.tsx b/src/client/components/website/WebsiteOnlineCount.tsx
@@ -17,7 +17,10 @@ export const WebsiteOnlineCount: React.FC<{
   if (typeof count === 'number' && count > 0) {
     return (
       <div className="flex items-center space-x-2">
-        <div className="h-2.5 w-2.5 flex-shrink-0 rounded-full bg-green-500" />
+        <div className='w-2.5" relative flex h-2.5'>
+          <div className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75" />
+          <div className="h-2.5 w-2.5 flex-shrink-0 rounded-full bg-green-500" />
+        </div>
         <span>
           {count} {t('current visitor')}
         </span>