pdf-reader-web/components/Skeleton/styled.ts

import styled, { css, keyframes } from 'styled-components';

import { color } from '../../constants/style';

const animate = keyframes`
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
`;

const shape: { [index: string]: any } = {
  rect: '',
  text: css`
    margin-top: 8px;
    margin-bottom: 8px;
    transform-origin: 0 65%;
    transform: translateZ(0) scale(1, 0.65);
    border-radius: 4px;
    text-indent: -999px;

    &:empty:before {
      content: ' ';
    }
  `,
  circle: css`
    border-radius: 50%;
  `,
};

export const Element = styled('div')<{ variant: string }>`
  display: block;
  background-color: ${color.gray};
  animation: ${animate} 1.5s ease-in-out infinite;
  margin: 5px 0;

  ${props => shape[props.variant]}
`;

export default Element;