CSS Loading Indicator Three Flashing Dots in styled-jsx

FlashingDots.tsx

export type FlashingDotsProps = {
  /**
   * Size of each dot
   */
  dotSize?: number;
  /**
   * Animation duration.
   */
  duration?: number;
  /**
   * Color of the dots.
   */
  color?: string;
  width?: number;
  height?: number;
};

/**
 * Flashing dots loading indicator.
 */
export default function FlashingDots({
  width = 30,
  height = 24,
  dotSize = 5,
  duration = 0.5,
  color = '#9880ff',
}: FlashingDotsProps) {
  return (
    <>
      <div>
        <i />
      </div>
      <style jsx>
        {`
          i {
            position: relative;
            animation: infinite linear alternate;
          }
          i::before,
          i::after {
            content: '';
            display: inline-block;
            position: absolute;
            top: 0;
            animation: infinite alternate;
          }
        `}
      </style>
      <style jsx>
        {`
          @keyframes dotFlashing {
            0% {
              opacity: 1;
            }
            50%,
            100% {
              opacity: 0.4;
            }
          }
          div {
            width: ${width}px;
            height: ${height}px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          i,
          i::before,
          i::after {
            animation-name: dotFlashing;
            color: ${color};
            background-color: ${color};
            width: ${dotSize}px;
            height: ${dotSize}px;
            border-radius: ${dotSize / 2}px;
            animation-duration: ${duration}s;
            animation-delay: ${duration / 2}s;
          }
          i::before {
            animation-delay: 0s;
            left: -${dotSize * 1.4}px;
          }
          i::after {
            animation-delay: ${duration}s;
            left: ${dotSize * 1.4}px;
          }
        `}
      </style>
    </>
  );
}