glide-design-system/src/lib/components/skeleton/Skeleton.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React from "react";
import styles from "./skeleton.module.css";

const Skeleton = ({
  variant = "rectangular",
  style,
  className,
  width,
  height,
}) => {
  const combinedStyle = {
    height:
      variant === "circle"
        ? height
          ? height
          : "36px"
        : height
        ? height
        : "60px",
    width:
      variant === "circle" ? (width ? width : "36px") : width ? width : "210px",
    borderRadius: variant === "circle" ? "50%" : "",
    ...style,
  };
  return (
    <div
      style={combinedStyle}
      className={`${styles.skeleton} ${className ? className : ""}`}
    ></div>
  );
};

export default Skeleton;