/* https://cssloaders.github.io/ */
.busy-three-circles {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 3px solid;
    border-color: red red transparent transparent;
    box-sizing: border-box;
    animation: busy-three-circles-rotation 1s linear infinite;
}

.busy-three-circles::after,
.busy-three-circles::before {
    width: 40px;
    height: 40px;
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 3px solid;
    border-color: transparent transparent green green;
    border-radius: 50%;
    box-sizing: border-box;
    animation: busy-three-circles-rotationBack 0.5s linear infinite;
    transform-origin: center center;
}

.busy-three-circles::before {
    width: 32px;
    height: 32px;
    border-color: blue blue transparent transparent;
    animation: busy-three-circles-rotation 1.5s linear infinite;
}

@keyframes busy-three-circles-rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes busy-three-circles-rotationBack {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

/* =================================================================== */
.busy-two-fishes {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    border-top: 4px solid red;
    border-right: 4px solid transparent;
    box-sizing: border-box;
    animation: busy-two-fishes-rotation 1s linear infinite;
}

.busy-two-fishes::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border-left: 4px solid green;
    border-bottom: 4px solid transparent;
    animation: busy-two-fishes-rotation 0.5s linear infinite reverse;
}

@keyframes busy-two-fishes-rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ================================================================ */
.busy-circle-2-colors {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    animation: busy-circle-2-colors-rotate 1s linear infinite
}

.busy-circle-2-colors::before,
.busy-circle-2-colors::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid blue;
    animation: busy-circle-2-colors-prixClipFix 2s linear infinite;
}

.busy-circle-2-colors::after {
    transform: rotate3d(90, 90, 0, 180deg);
    border-color: green;
}

@keyframes busy-circle-2-colors-rotate {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes busy-circle-2-colors-prixClipFix {
    0% {
        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
    }

    50% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
    }

    75%,
    100% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
    }
}

/* ================================================================ */
.busy-progess-bar-continuous {
    top: 0px !important;
    height: 7px;
    overflow: hidden;
}

.busy-progess-bar-continuous::after {
    content: '';
    width: 40%;
    height: 100%;
    background: lightgreen;
    position: absolute;
    top: 0;
    left: 0;
    animation: busy-progess-bar-continuous-kfs 1s linear infinite;
}

@keyframes busy-progess-bar-continuous-kfs {
    0% {
        left: 0;
        transform: translateX(-100%);
    }

    100% {
        left: 100%;
        transform: translateX(0%);
    }
}


/* ================================================================ */
.busy-loading-image {
    width: 320px;
    height: 150px;
    display: block;
    margin: auto;
    position: relative;
    background: #FFF;
    box-sizing: border-box;
}

.busy-loading-image::after {
    content: '';
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    top: 15px;
    left: 15px;
    position: absolute;
    background-image: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent 80%), radial-gradient(circle 28px at 28px 28px, #DDD 99%, transparent 0), linear-gradient(#DDD 24px, transparent 0), linear-gradient(#DDD 18px, transparent 0), linear-gradient(#DDD 66px, transparent 0);
    background-repeat: no-repeat;
    background-size: 75px 130px, 55px 56px, 160px 30px, 260px 20px, 290px 56px;
    background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
    box-sizing: border-box;
    animation: busy-loading-image-animloader 1s linear infinite;
}

@keyframes busy-loading-image-animloader {
    0% {
        background-position: 0% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
    }

    100% {
        background-position: 150% 0, 0 0, 70px 5px, 70px 38px, 0px 66px;
    }
}