better-react-spinkit/src/RotatingPlane/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 = 18

const RotatingPlane = ({ color, duration, size, ...props }, { betterReactSpinkit = {} }) => {
  const name = animationName('rotating-plane')
  const finalSize = preside(size, betterReactSpinkit.size, defaultSize)
  return (
    <Base
      css={`
        @-webkit-keyframes ${name} {
          0% {
            -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
                    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
          }
          50% {
            -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
                    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
          }
          100% {
            -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
                    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
          }
        }
        @keyframes ${name} {
          0% {
            -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
                    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
          }
          50% {
            -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
                    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
          }
          100% {
            -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
                    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
          }
        }
      `}
      {...props}
    >
      <div
        style={{
          ...animate({ name, duration }),
          backgroundColor: preside(color, betterReactSpinkit.color, defaults.color),
          height: finalSize,
          width: finalSize
        }}
      />
    </Base>
  )
}

RotatingPlane.contextTypes = defaults.contextTypes

RotatingPlane.propTypes = {
  /**
   * The color of the spinner.
   */
  color: PropTypes.string,
  /**
   * The duration of the animation.
   */
  duration: PropTypes.string,
  /**
   * The size of the spinner.
   */
  size: PropTypes.number
}

RotatingPlane.defaultProps = {
  duration: '1.2s',
  size: defaultSize
}

export default RotatingPlane