{"size": 1150, "ext": "js", "max_stars_repo_path": "libs/icons/src/components/LoadingIcon.js", "max_stars_repo_name": "teug91/amr", "max_stars_repo_stars_event_min_datetime": "2019-04-24T11:08:36.000Z", "max_stars_repo_stars_event_max_datetime": "2019-04-24T11:08:36.000Z", "max_issues_repo_path": "libs/icons/src/components/LoadingIcon.js", "max_issues_repo_name": "teug91/amr", "max_issues_repo_issues_event_min_datetime": "2019-04-23T21:01:24.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T09:58:53.000Z", "max_forks_repo_path": "libs/icons/src/components/LoadingIcon.js", "max_forks_repo_name": "teug91/amr", "max_forks_repo_forks_event_min_datetime": "2020-05-11T12:45:45.000Z", "max_forks_repo_forks_event_max_datetime": "2020-05-11T12:45:45.000Z"}
{"max_stars_count": 1, "max_issues_count": 17, "max_forks_count": 1, "avg_line_length": 23.9583333333, "max_line_length": 73, "alphanum_fraction": 0.5313043478}
import React from 'react'
import styled, { css } from 'styled-components'

const StyledSvg = styled.svg`
    fill: white;
    color: white;
    width: 24px;
    height: 24px;
    animation: anim-rotate 1.4s linear infinite;
    circle {
        stroke: currentColor;
        stroke-dasharray: 80px, 200px;
        stroke-dashoffset: 0;
        animation: anim-dash 1.4s ease-in-out infinite;
    }
    @keyframes anim-rotate {
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes anim-dash {
        0% {
            stroke-dasharray: 1px, 200px;
            stroke-dashoffset: 0;
        }
        50% {
            stroke-dasharray: 100px, 200px;
            stroke-dashoffset: -15px;
        }
        100% {
            stroke-dasharray: 100px, 200px;
            stroke-dashoffset: -120px;
        }
    }
`

export const LoadingIcon = ({ className }) => (
    <StyledSvg
        xmlns="http://www.w3.org/2000/svg"
        width="48"
        height="48"
        viewBox="22 22 44 44"
        className={className}
    >
        <circle cx="44" cy="44" r="20.2" fill="none" strokeWidth="3.6" />
    </StyledSvg>
)
