{"size": 1619, "ext": "js", "max_stars_repo_path": "src/components/RotateScale/index.js", "max_stars_repo_name": "delwiv/styled-loaders-react", "max_stars_repo_stars_event_min_datetime": "2017-10-13T02:37:11.000Z", "max_stars_repo_stars_event_max_datetime": "2021-06-26T14:39:45.000Z", "max_issues_repo_path": "src/components/RotateScale/index.js", "max_issues_repo_name": "delwiv/styled-loaders-react", "max_issues_repo_issues_event_min_datetime": "2018-03-07T03:54:04.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T01:28:00.000Z", "max_forks_repo_path": "src/components/RotateScale/index.js", "max_forks_repo_name": "delwiv/styled-loaders-react", "max_forks_repo_forks_event_min_datetime": "2018-03-05T22:34:02.000Z", "max_forks_repo_forks_event_max_datetime": "2020-12-27T16:55:20.000Z"}
{"max_stars_count": 20, "max_issues_count": 9, "max_forks_count": 5, "avg_line_length": 24.1641791045, "max_line_length": 61, "alphanum_fraction": 0.5818406424}
import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { rotate, bounce } from '../../utils/animations'
import { getSize, getColor } from '../../utils/defaults'

const RotateScale = ({ color, duration, size }) => {
    const Spinner = styled.div`
        margin: 100px auto;
        position: relative;
        width: ${getSize(size)};
        height: ${getSize(size)};
        text-align: center;
        animation: ${rotate} 2s infinite ease-in-out;
        animation-duration: ${props =>
        props.duration ? props.duration : '2s'};
    `

    const DefaultCube = styled.div`
        width: 60%;
        height: 60%;
        display: inline-block;
        position: absolute;
        top: 0;
        border-radius: 100%;
        background-color: ${getColor(color)};
        animation: ${bounce} 2s infinite ease-in-out;
        animation-duration: ${props =>
        props.duration ? props.duration : '2s'};
    `

    const Cube = styled(DefaultCube)`
        top: auto;
        bottom: 0;
        animation-delay: -1s;
    `

    return (
        <Spinner size={size} duration={duration}>
            <DefaultCube color={color} duration={duration} />
            <Cube color={color} duration={duration} />
        </Spinner>
    )
}

export default RotateScale

RotateScale.propTypes = {
    /**
	 * Background of the spinner
	 * default is #333
	 */
    color: PropTypes.string,

    /**
	 * Animation duration
	 * default is 1.2s
	 */
    duration: PropTypes.string,

    /**
	 * Size of the spinner
	 * default is 40px
	 */
    size: PropTypes.string,
}
