Basic box blinking loading component in React, Styled Components

index.js

import styled from 'styled-components';


const BoxBlink = styled.div`
@keyframes blinker {
  50% {
    opacity: 0;
  }
}
animation: blinker 2s linear infinite;
width: ${(props) => props.width};
min-height: ${(props) => props.height};
background-color: ${(props) => props.color};
border-radius: ${(props) => props.radius};
margin-bottom: 1em;
`

export default BoxBlink;


BoxBlink.defaultProps = {
    color: '#ddd',
    width: '100%',
    height: '1.1em',
    radius: '4px'
}

usage.MD

    import BoxBlink from 'BoxBlink';
    
    <BoxBlink color={db.theme.colors.alternatives} />
    <BoxBlink color={db.theme.colors.alternatives} height="2em" />
    <BoxBlink color={db.theme.colors.alternatives} color="#ffffff" />
    <BoxBlink color={db.theme.colors.alternatives} />
    <BoxBlink color={db.theme.colors.alternatives} width="50%" />