better-react-spinkit/src/WanderingCubes/index.js

A collection of loading indicators animated with CSS for React

import React from 'react'
import Base from '../Base'
import PropTypes from 'prop-types'
import { animate, animationName, defaults, preside } from '../util'

const defaultSize = 16

const WanderingCubes = ({ color, cubeSize, duration, size, timingFunction, ...props }, { betterReactSpinkit = {} }) => {
  const name = animationName('wandering-cubes')
  const finalSize = preside(size, betterReactSpinkit.size, defaultSize)
  const outer = {
    height: finalSize,
    paddingBottom: cubeSize,
    paddingRight: cubeSize,
    position: 'relative',
    width: finalSize
  }
  const cube = {
    ...animate({ name, duration, timingFunction }),
    backgroundColor: preside(color, betterReactSpinkit.color, defaults.color),
    height: cubeSize,
    left: 0,
    position: 'absolute',
    top: 0,
    width: cubeSize
  }
  return (
    <Base
      css={`
        @-webkit-keyframes ${name} {
          25% { -webkit-transform: translateX(${finalSize}px) rotate(-90deg) scale(0.5) }
          50% { -webkit-transform: translateX(${finalSize}px) translateY(${finalSize}px) rotate(-180deg) }
          75% { -webkit-transform: translateX(0px) translateY(${finalSize}px) rotate(-270deg) scale(0.5) }
          100% { -webkit-transform: rotate(-360deg) }
        }
        @keyframes ${name} {
          25% { 
            -webkit-transform: translateX(${finalSize}px) rotate(-90deg) scale(0.5);
                    transform: translateX(${finalSize}px) rotate(-90deg) scale(0.5);
          } 50% { 
            -webkit-transform: translateX(${finalSize}px) translateY(${finalSize}px) rotate(-179deg);
                    transform: translateX(${finalSize}px) translateY(${finalSize}px) rotate(-179deg);
          } 50.1% { 
            -webkit-transform: translateX(${finalSize}px) translateY(${finalSize}px) rotate(-180deg);
                    transform: translateX(${finalSize}px) translateY(${finalSize}px) rotate(-180deg);
          } 75% { 
            -webkit-transform: translateX(0px) translateY(${finalSize}px) rotate(-270deg) scale(0.5);
                    transform: translateX(0px) translateY(${finalSize}px) rotate(-270deg) scale(0.5);
          } 100% { 
            -webkit-transform: rotate(-360deg);
                    transform: rotate(-360deg);
          }
        }
      `}
      {...props}
    >
      <div style={outer}>
        <div
          style={{
            ...cube
          }}
        />
        <div
          style={{
            ...cube,
            ...animate({
              delay: '-0.9s'
            })
          }}
        />
      </div>
    </Base>
  )
}

WanderingCubes.propTypes = {
  /**
   *  The color of the spinner.
   */
  color: PropTypes.string,
  /**
   *  Maximum size of the cubes
   */
  cubeSize: PropTypes.number,
  /**
   *  The duration of the animation.
   */
  duration: PropTypes.string,
  /**
   *  The size of the spinner.
   */
  size: PropTypes.number,
  timingFunction: PropTypes.oneOf(['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'])
}

WanderingCubes.defaultProps = {
  cubeSize: 7,
  duration: '2s',
  size: defaultSize,
  timingFunction: 'ease-in-out'
}

WanderingCubes.contextTypes = defaults.contextTypes

export default WanderingCubes