import React from 'react';

const LoadingDots: React.FC = () => {
  return (
    <span className="loading-dots">
      <span className="dot">.</span>
      <span className="dot">.</span>
      <span className="dot">.</span>
      <style jsx>{`
        .loading-dots {
          display: inline-block;
          font-size: 24px; 
        }
        .dot {
          opacity: 0;
          animation: showHideDot 1.5s ease-in-out infinite;
        }
        .dot:nth-child(1) { animation-delay: 0s; }
        .dot:nth-child(2) { animation-delay: 0.5s; }
        .dot:nth-child(3) { animation-delay: 1s; }
        @keyframes showHideDot {
          0% { opacity: 0; }
          50% { opacity: 1; }
          100% { opacity: 0; }
        }
      `}</style>
    </span>
  );
};

export default LoadingDots;