Simplest skeleton/placeholder loading component ever.

skeleton.js

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

export default Skeleton	export const skeletonKeyframes = keyframes`
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
`

const Skeleton = styled.div`
  border-radius: 4px;
  width: 100%;
  ${p => p.circle && css`
    border-radius: 50%;
  `}
  ${p => p.width && css`
    width: ${p.width};
  `}
  ${p => p.height && css`
    height: ${p.height};
  `}
  background-color: ${defaultBaseColor};
  background-image: linear-gradient(
    90deg,
    ${defaultBaseColor},
    ${defaultHighlightColor},
    ${defaultBaseColor}
  );
  background-size: 200px 100%;
  background-repeat: no-repeat;
  display: inline-block;
  line-height: 1;
  animation: ${skeletonKeyframes} ${p => p.duration}s ease-in-out infinite;
`

Skeleton.defaultProps = {
  // width: null,
  height: null,
  duration: 1.2,
  circle: false,
}

export default Skeleton