Function ScaleLoader

src/ScaleLoader.tsx:15–56

({
  loading = true,
  color = "#000000",
  speedMultiplier = 1,
  cssOverride = {},
  height = 35,
  width = 4,
  radius = 2,
  margin = 2,
  barCount = 5,
  ...additionalprops
}: LoaderHeightWidthRadiusProps & { barCount?: number })

);

function ScaleLoader({
  loading = true,
  color = "#000000",
  speedMultiplier = 1,
  cssOverride = {},
  height = 35,
  width = 4,
  radius = 2,
  margin = 2,
  barCount = 5,
  ...additionalprops
}: LoaderHeightWidthRadiusProps & { barCount?: number }) {
  const wrapper: React.CSSProperties = {
    display: "inherit",
    ...cssOverride,
  };

  const style = (i: number): React.CSSProperties => {
    return {
      backgroundColor: color,
      width: cssValue(width),
      height: cssValue(height),
      margin: cssValue(margin),
      borderRadius: cssValue(radius),
      display: "inline-block",
      animation: `${scale} ${1 / speedMultiplier}s ${i * 0.1}s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08)`,
      animationFillMode: "both",
    };
  };

  if (!loading) {
    return null;
  }

  return (
    <span style={wrapper} {...additionalprops}>
      {[...Array(barCount)].map((_, i) => (
        <span key={i} style={style(i + 1)} />
      ))}
    </span>
  );
}

export default ScaleLoader;