/* For indeterminate progress bar (loading circle) */
.spinner {
    position: relative;
    width: 32px;
    height: 32px;
    display: block;
    margin: 10px auto;
}

    .spinner div {
        width: 26%;
        height: 26%;
        background: var(--ProgressBar-IndicatorFill-Background, fuchsia);
        position: absolute;
        left: 44.5%;
        top: 37%;
        opacity: 0;
        animation: fade 1.5s linear infinite, rotate 1.5s linear infinite;
        border-radius: 25px;
    }

    .spinner .bar1 {
        transform: rotate(0deg) translate(0, -200%);
        animation-delay: 0s;
    }

    .spinner .bar2 {
        transform: rotate(36deg) translate(0, -200%);
        animation-delay: -1.35s, -.15s;
    }

    .spinner .bar3 {
        transform: rotate(72deg) translate(0, -200%);
        animation-delay: -1.2s, -.3s;
    }

    .spinner .bar4 {
        transform: rotate(108deg) translate(0, -200%);
        animation-delay: -1.05s, -.45s;
    }

    .spinner .bar5 {
        transform: rotate(144deg) translate(0, -200%);
        animation-delay: -.9s, -.6s;
    }

    .spinner .bar6 {
        transform: rotate(180deg) translate(0, -200%);
        animation-delay: -.75s, -.75s;
    }

    .spinner .bar7 {
        transform: rotate(216deg) translate(0, -200%);
        animation-delay: -0.6s, -.9s;
    }

    .spinner .bar8 {
        transform: rotate(252deg) translate(0, -200%);
        animation-delay: -0.45s, -1.05s;
    }

    .spinner .bar9 {
        transform: rotate(288deg) translate(0, -200%);
        animation-delay: -0.3s, -1.2s;
    }

    .spinner .bar10 {
        transform: rotate(324deg) translate(0, -200%);
        animation-delay: -0.15s, -1.35s;
    }

@keyframes fade {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg) translateX(16px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(16px) rotate(-360deg);
    }
}