/* ============================================================
   Onesown Blazor Components – Loading Spinner (sk-fading-circle)
   ============================================================ */

.sk-fading-circle {
    height: 40px;
    position: relative;
    width: 40px;
}

.sk-fading-circle .sk-circle {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.sk-fading-circle .sk-circle::before {
    animation: sk-circleFadeDelay 1.2s ease-in-out infinite both;
    background-color: #333;
    border-radius: 100%;
    content: "";
    display: block;
    height: 15%;
    margin: 0 auto;
    width: 15%;
}

.sk-fading-circle .sk-circle2  { transform: rotate(30deg);  }
.sk-fading-circle .sk-circle3  { transform: rotate(60deg);  }
.sk-fading-circle .sk-circle4  { transform: rotate(90deg);  }
.sk-fading-circle .sk-circle5  { transform: rotate(120deg); }
.sk-fading-circle .sk-circle6  { transform: rotate(150deg); }
.sk-fading-circle .sk-circle7  { transform: rotate(180deg); }
.sk-fading-circle .sk-circle8  { transform: rotate(210deg); }
.sk-fading-circle .sk-circle9  { transform: rotate(240deg); }
.sk-fading-circle .sk-circle10 { transform: rotate(270deg); }
.sk-fading-circle .sk-circle11 { transform: rotate(300deg); }
.sk-fading-circle .sk-circle12 { transform: rotate(330deg); }

.sk-fading-circle .sk-circle2::before  { animation-delay: -1.1s; }
.sk-fading-circle .sk-circle3::before  { animation-delay: -1.0s; }
.sk-fading-circle .sk-circle4::before  { animation-delay: -0.9s; }
.sk-fading-circle .sk-circle5::before  { animation-delay: -0.8s; }
.sk-fading-circle .sk-circle6::before  { animation-delay: -0.7s; }
.sk-fading-circle .sk-circle7::before  { animation-delay: -0.6s; }
.sk-fading-circle .sk-circle8::before  { animation-delay: -0.5s; }
.sk-fading-circle .sk-circle9::before  { animation-delay: -0.4s; }
.sk-fading-circle .sk-circle10::before { animation-delay: -0.3s; }
.sk-fading-circle .sk-circle11::before { animation-delay: -0.2s; }
.sk-fading-circle .sk-circle12::before { animation-delay: -0.1s; }

@keyframes sk-circleFadeDelay {
    0%, 39%, 100% { opacity: 0; }
    40%            { opacity: 1; }
}