@axeptio/design-system/build/src/Core/Skeleton/index.jsx

Design System for Axeptio

import styled from 'styled-components';
import PropTypes from 'prop-types';

function sizeToCss(size) {
  return typeof size === 'number' ? `${size}px` : size;
}

const StyledSkeleton = styled('span', { shouldForwardProp: false })`
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.11);
  height: ${({ height }) => sizeToCss(height) || '.7em'};
  width: ${({ width }) => sizeToCss(width) || '150px'};
  border-radius: ${({ round }) => (round ? '50%' : '4px')};

  @media (prefers-reduced-motion: no-preference) {
    animation: 2s ease-in-out 0.5s infinite normal none running animation-pulse;

    @keyframes animation-pulse {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0.4;
      }
      100% {
        opacity: 1;
      }
    }
  }
`;

function Skeleton({ width, height, round, className }) {
  return <StyledSkeleton width={width} height={height} round={round} className={className} />;
}

Skeleton.propTypes = {
  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  round: PropTypes.bool,
  className: PropTypes.string
};

export default Skeleton;