import React from 'react';
 
const ButtonLoader: React.FC<{className?: string}> = ({className = ''}) => {
  return (
    <>
      <div className="flex justify-center items-center gap-2 h-5 bg-transparent">
        <span className={`dot delay-0 ${className}`}></span>
        <span className={`dot delay-200 ${className}`}></span>
        <span className={`dot delay-400 ${className}`}></span>
      </div>
 
      <style>
        {`
          .dot {
            width:8px;
            height:8px;
            background-color: #fff;
            border-radius: 9999px;
            animation: wave 1s infinite ease-in-out;
          }
 
          .delay-0 {
            animation-delay: 0s;
          }
 
          .delay-200 {
            animation-delay: 0.2s;
          }
 
          .delay-400 {
            animation-delay: 0.4s;
          }
 
          @keyframes wave {
            0%, 100% {
              transform: translateY(0);
            }
            30% {
              transform: translateY(-5px);
            }
            60% {
              transform: translateY(5px);
            }
          }
        `}
      </style>
    </>
  );
};
 
export default ButtonLoader;