Chakra UI FlashingDots

FlashingDots.tsx

import {
  chakra,
  keyframes,
  CSSObject,
  ChakraProps,
  useToken,
} from '@chakra-ui/react';

export type FlashingDotsProps = Pick<ChakraProps, 'width' | 'height'> & {
  /**
   * Size of each dot
   */
  dotSize?: number;
  /**
   * Animation duration.
   */
  duration?: number;
  /**
   * Color of the dots.
   */
  color?: string;
  /**
   * End color for fading out.
   */
  endColor?: string;
  width?: number;
};

/**
 * Flashing dots loading indicator.
 */
export default function FlashingDots({
  width = 8,
  height = 6,
  dotSize = 5,
  duration = 0.5,
  color: color_ = 'primary.400',
  endColor: endColor_ = 'primary.100',
}: FlashingDotsProps) {
  const wrapperStyle: CSSObject = {
    width,
    height,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  };
  const [color, endColor] = useToken('colors', [color_, endColor_]);
  const flashingDotsAnimation = keyframes`
    0% {
      background-color: ${color}
    }
    50%,
    100% {
      background-color: ${endColor}
    }
  `;
  const dotStyle: CSSObject = {
    position: 'relative',
    '&, &:before, &:after': {
      animation: `${duration}s ${flashingDotsAnimation} infinite linear alternate`,
      animationDelay: `${duration / 2}s`,
      color: color,
      backgroundColor: color,
      width: `${dotSize}px`,
      height: `${dotSize}px`,
      borderRadius: `${dotSize / 2}px`,
    },
    '&:before, &:after': {
      animationTimingFunction: 'ease',
      position: 'absolute',
      top: 0,
      content: '""',
      display: 'inline-block',
    },
    '&:before': {
      animationDelay: '0s',
      left: `${-dotSize * 1.45}px`,
    },
    '&:after': {
      animationDelay: `${duration}s`,
      left: `${dotSize * 1.45}px`,
    },
  };

  return (
    <chakra.div __css={wrapperStyle}>
      <chakra.span __css={dotStyle} />
    </chakra.div>
  );
}