{"size": 1570, "ext": "js", "max_stars_repo_path": "src/components/ball/index.js", "max_stars_repo_name": "dmandreev/react-spinners-kit", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/ball/index.js", "max_issues_repo_name": "dmandreev/react-spinners-kit", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/ball/index.js", "max_forks_repo_name": "dmandreev/react-spinners-kit", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 24.9206349206, "max_line_length": 88, "alphanum_fraction": 0.5757961783}
import React from "react";
import PropTypes from "prop-types";
import styled, { keyframes } from "styled-components";

const motion = props => keyframes`
    0% {
        transform: translateX(0) scale(1);
    }
    25% {
        transform: translateX(${props.size / 2}${props.sizeUnit}) scale(0.25);
    }
    50% {
        transform: translateX(0) scale(1);
    }
    75% {
        transform: translateX(${-props.size / 2}${props.sizeUnit}) scale(0.25);
    }
    100% {
        transform: translateX(0) scale(1);

    }
`;

export const BallSpinner = ({ size, color, loading, sizeUnit }) => {
    return (
        loading && (
            <Wrapper size={size}>
                <Ball color={color} size={size} sizeUnit={sizeUnit} />
            </Wrapper>
        )
    );
};

const Wrapper = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    width: ${props => `${props.size}${props.sizeUnit}`};
    height: ${props => `${props.size / 2}${props.sizeUnit}`};
`;

const Ball = styled.div`
    width: ${props => `${props.size / 3}${props.sizeUnit}`};
    height: ${props => `${props.size / 3}${props.sizeUnit}`};
    border-radius: 50%;
    background-color: ${props => props.color};
    animation: ${props => motion(props)} 3s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
`;

BallSpinner.defaultProps = {
    loading: true,
    size: 40,
    color: "#00ff89",
    sizeUnit: "px",
};

BallSpinner.propTypes = {
    loading: PropTypes.bool,
    size: PropTypes.number,
    color: PropTypes.string,
    sizeUnit: PropTypes.string,
};
