UI Component Code Gallery for React - by Mirado Andria

Loading Bounce A

Components that can be used as loading or placeholder

Preview

With content:

LOADING CONTENT

Code

import styles from "./loading-bounce-a.module.css";

type Props = {
  className?: string;
  children?: React.ReactNode;
  size?: "small" | "medium" | "large";
  // Put additional variants here, then define them in the CSS
  variant?: "default" | "blue" | "red";
};
export default function LoadingBounceA({
  className,
  children,
  size,
  variant = "default",
}: Props) {
  return (
    <>
      <div
        className={[
          styles["wrapper"],
          styles[`s-${size}`],
          styles[`variant-${variant}`],
          className,
        ].join(" ")}
      >
        <div className={styles["circles"]}>
          <div className={styles["circle-1"]}></div>
          <div className={styles["circle-2"]}></div>
        </div>
        {children && <div className={styles["content"]}>{children}</div>}
      </div>
    </>
  );
}

Design

Figma design file:

Documentation

Properties

Props of the component:

  • className (string): Specifies the CSS class of the component.

  • children (ReactNode): React children of the component. Specifies the ReactNode placed inside the component.

  • size ("x-small" | "small" | "medium" | "large"): Specifies the size of the frame.

  • variant ("default" | "blue" or a customized value): Specifies the color or theme variant of the component. See the "Sample CSS customization" below for an example of usage.

  • onClick (function): Fires when the button is clicked.

  • onClickClose (function): Fires when the close button is clicked.

Sample CSS customization
/* color="blue" */
.variant-blue {
    --circle-1-color: #567FEF;
    --circle-2-color: rgba(86, 127, 239, 0.5);
}