{"size": 3105, "ext": "js", "max_stars_repo_path": "src/components/loader/StyledSun.js", "max_stars_repo_name": "arfusop/weather", "max_stars_repo_stars_event_min_datetime": "2019-05-26T21:38:58.000Z", "max_stars_repo_stars_event_max_datetime": "2019-05-26T21:38:58.000Z", "max_issues_repo_path": "src/components/loader/StyledSun.js", "max_issues_repo_name": "arfusop/weather", "max_issues_repo_issues_event_min_datetime": "2020-05-13T15:10:18.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T11:03:54.000Z", "max_forks_repo_path": "src/components/loader/StyledSun.js", "max_forks_repo_name": "arfusop/weather", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 6, "max_forks_count": null, "avg_line_length": 20.1623376623, "max_line_length": 56, "alphanum_fraction": 0.5140096618}
import styled from '@emotion/styled'

const StyledSun = styled.section`
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 0;
    width: 25%;
    padding-bottom: 25%;
    background-color: #12a4dc;
    border-radius: 1%;
    box-shadow: 1px 1px 20px grey;
    z-index: 2;

    .preloader-top {
        position: absolute;
        width: 90%;
        height: 75%;
        top: 0;
        overflow: hidden;
    }

    .preloader-top-sun {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        height: 0;
        width: 35%;
        padding-bottom: 35%;
        animation: preloader 3s ease infinite;
    }

    .preloader-top-sun-bg {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 100%;
        border: 5px solid gold;
        box-sizing: border-box;
    }

    .preloader-top-sun-line {
        position: absolute;
        width: 20%;
        height: 5px;
        border-radius: 5px;
        background: gold;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

    .preloader-top-sun-line-0 {
        transform: rotate(0deg) translateX(-350%);
    }

    .preloader-top-sun-line-45 {
        transform: rotate(45deg) translateX(-350%);
    }

    .preloader-top-sun-line-90 {
        transform: rotate(90deg) translateX(-350%);
    }

    .preloader-top-sun-line-135 {
        transform: rotate(135deg) translateX(-350%);
    }

    .preloader-top-sun-line-180 {
        transform: rotate(180deg) translateX(-350%);
    }

    .preloader-top-sun-line-225 {
        transform: rotate(225deg) translateX(-350%);
    }

    .preloader-top-sun-line-270 {
        transform: rotate(270deg) translateX(-350%);
    }

    .preloader-top-sun-line-315 {
        transform: rotate(315deg) translateX(-350%);
    }

    .preloader-bottom {
        position: absolute;
        width: 90%;
        height: 25%;
        bottom: 0;
    }

    .preloader-bottom-line {
        position: absolute;
        background: gold;
        height: 5px;
        border-radius: 5px;
        margin: auto;
        left: 0;
        right: 0;
    }

    .preloader-bottom-line-lg {
        width: 100%;
        top: 0%;
    }

    .preloader-bottom-line-md {
        width: 75%;
        top: 25%;
    }

    .preloader-bottom-line-sm {
        width: 50%;
        top: 50%;
    }

    .preloader-bottom-line-xs {
        width: 25%;
        top: 75%;
    }

    .loaderContainer {
        height: 200px;
        width: 160px;
        padding: 5%;
        background-color: transparent;
        z-index: 500;
    }

    @keyframes preloader {
        0% {
            transform: translateY(200%) rotate(0deg);
        }
        25% {
            transform: translateY(0) rotate(0deg);
            transition-timing-function: ease-out;
        }
        100% {
            transform: translateY(200%) rotate(-180deg);
            transition-timing-function: ease-in;
        }
    }
`

export default StyledSun
