UI Component Code Gallery for React - by Mirado Andria

Loading Spinner A

Components that can be used as loading or placeholder

Preview

With content:

Code

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

type Props = {
  className?: string;
  children?: React.ReactNode;
  size?: "small" | "medium" | "large";
  spinner1Border?: "none" | "thin" | "medium" | "thick";
  spinner2Border?: "none" | "thin" | "medium"  | "thick";
  alignContent?: "vertical" | "center";
  // Put additional variants here, then define them in the CSS
  variant?: "default" | "blue" | "red";
};
export default function LoadingSpinnerA({
  className,
  children,
  size,
  alignContent,
  spinner1Border = "thin",
  spinner2Border = "thick",
  variant = "default",
}: Props) {
  return (
    <>
      <div
        className={[
          styles["wrapper"],
          styles[`s-${size}`],
          styles[`al-${alignContent}`],
          styles[`s1-b-${spinner1Border}`],
          styles[`s2-b-${spinner2Border}`],
          styles[`variant-${variant}`],
          className,
        ].join(" ")}
      >
        <div className={styles["spinners"]}>
          <div className={styles["spinner-1"]}></div>
          <div className={styles["spinner-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.

  • spinner1Border ("none" | "thin" | "medium" | "thick"): Specifies the border size of outer spinner.

  • spinner2Border ("none" | "thin" | "medium" | "thick"): Specifies the border size of inner spinner.

  • alignContent("vertical" | "center"): Places the children component vertically after to the spinner or aligns center it.

  • 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 {
    --spinner-1-color: #567FEF;
    --spinner-2-color: rgba(86, 127, 239, 0.5);
}