@import url('../basic.css');

.infinity-loader_preloader-template {
    position: relative;
    width: 60px;
    height: 30px;
    transform: rotate(90deg);
}

.infinity-loader_preloader-template:before,
.infinity-loader_preloader-template:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    border: 4px solid #3498db;
    border-radius: 50px 50px 0 50px;
    transform: rotate(-45deg);
    animation: infinity-loader-top-right_preloader_animation 2s linear infinite;
}

.infinity-loader_preloader-template:after {
    top: 0;
    left: auto;
    right: 0;
    border-radius: 50px 50px 50px 0;
    transform: rotate(45deg);
    animation: infinity-loader-bottom-left_preloader_animation 2s linear infinite;
}

@keyframes infinity-loader-top-right_preloader_animation {
    0% { transform: rotate(-45deg); }
    50% { transform: rotate(135deg); }
    100% { transform: rotate(315deg); }
}

@keyframes infinity-loader-bottom-left_preloader_animation {
    0% { transform: rotate(45deg); }
    50% { transform: rotate(225deg); }
    100% { transform: rotate(405deg); }
}