:root {
    /* Speed values */
    --animation-speed-xsl: 4000ms;
    --animation-speed-sl: 3000ms;
    --animation-speed-md: 2000ms;
    --animation-speed-fs: 1000ms;
    --animation-speed-xfs: 500ms;

    --animation-speed-default: var(--animation-speed-md);

    /* Before and After Classes Offsets */

    --before-round-offset: 0.2;
    --after-round-offset: 0.2;

    /* Color Fade Values */
    --animation-color-1: #ff0000;
    --animation-color-2: #ffff00;
    --animation-color-3: #00ff00;
    --animation-color-4: #00ffff;
    --animation-color-5: #0000ff;
    --animation-color-6: #ff00ff;
}

.round1, 
.before-round1::before, 
.after-round1::after {
    --diameter: 50px;

    width: var(--diameter);
    height: var(--diameter);

    position: absolute;
    top: calc(50% - var(--diameter) / 2);
    left: calc(50% - var(--diameter) / 2);

    border-radius: 50%;
    border: 1px solid currentColor;
    border-bottom-color: transparent;
}

.round2, 
.before-round2::before, 
.after-round2::after {
    --diameter: 50px;

    width: var(--diameter);
    height: var(--diameter);

    position: absolute;
    top: calc(50% - var(--diameter) / 2);
    left: calc(50% - var(--diameter) / 2);

    border-radius: 50%;
    border: 1px solid currentColor;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

.round3, 
.before-round3::before, 
.after-round3::after {
    --diameter: 50px;

    width: var(--diameter);
    height: var(--diameter);

    position: absolute;
    top: calc(50% - var(--diameter) / 2);
    left: calc(50% - var(--diameter) / 2);

    border-radius: 50%;
    border: 1px solid transparent;
    border-bottom-color: currentColor;
}

.sq1 {
    --spin-duration: var(--animation-speed-default);
    --side: 50px;

    animation: clockwise var(--spin-duration) linear infinite;
}

.sq1::before, 
.sq1::after {
    content: "";
    transform: rotate(45deg);
}

.sq1::before {
    --side: 70.7107%;
}

.sq1::after {
    --side: 141.4214%;
}

.sq1, 
.sq1::before, 
.sq1::after {
    position: absolute;

    top: calc(50% - var(--side) / 2);
    left: calc(50% - var(--side) / 2);

    width: var(--side);
    height: var(--side);

    border: 1px solid currentColor;
}

.square1, 
.before-square1::before, 
.after-square1::after {
    --side: 50px;

    width: var(--side);
    height: var(--side);

    position: absolute;
    top: calc(50% - var(--side) / 2);
    left: calc(50% - var(--side) / 2);

    border: 1px solid currentColor;
}

.square2, 
.before-square2::before, 
.after-square2::after {
    --side: 50px;

    width: var(--side);
    height: var(--side);

    position: absolute;
    top: calc(50% - var(--side) / 2);
    left: calc(50% - var(--side) / 2);

    border: 1px solid currentColor;
    border-top-color: transparent;
}

.square3, 
.before-square3::before, 
.after-square3::after {
    --side: 50px;

    width: var(--side);
    height: var(--side);

    position: absolute;
    top: calc(50% - var(--side) / 2);
    left: calc(50% - var(--side) / 2);

    border: 1px solid currentColor;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

.square4, 
.before-square4::before, 
.after-square4::after {
    --side: 50px;

    width: var(--side);
    height: var(--side);

    position: absolute;
    top: calc(50% - var(--side) / 2);
    left: calc(50% - var(--side) / 2);

    border: 1px solid currentColor;
    border-top-color: transparent;
    border-left-color: transparent;
}

.square5, 
.before-square5::before, 
.after-square5::after {
    --side: 50px;

    width: var(--side);
    height: var(--side);

    position: absolute;
    top: calc(50% - var(--side) / 2);
    left: calc(50% - var(--side) / 2);

    border: 1px solid transparent;
    border-top-color: currentColor;
}

.before-round1::before, 
.before-round2::before, 
.before-round3::before {
    --inner-diameter: calc(0.8 * var(--diameter));
}

.after-round1::after, 
.after-round2::after, 
.after-round3::after {
    --inner-diameter: calc(1.2 * var(--diameter));
}

.before-round1::before, 
.after-round1::after, 
.before-round2::before, 
.after-round2::after, 
.before-round3::before, 
.after-round3::after {
    content: "";

    height: var(--inner-diameter);
    width: var(--inner-diameter);

    top: calc(50% - var(--inner-diameter) / 2);
    left: calc(50% - var(--inner-diameter) / 2);
}

.before-square1::before, 
.after-square1::after {
    content: "";
}

/* Shade classes */

.shade, 
.before-shade::before, 
.after-shade::after {
    box-shadow: inset 0 0 5px 0 currentColor, 
        0 0 5px 0 currentColor;
}

.shade.sq1, 
.shade.sq1::before, 
.shade.sq1::after {
    border-color: transparent;
    box-shadow: inset 0 0 5px 0 currentColor, 
        0 0 5px 0 currentColor;
}

/* Rotation classes */

.clockwise, 
.counter-clockwise, 
.before-clockwise::before, 
.after-clockwise::after, 
.before-counterclockwise::before, 
.after-counterclockwise::after {
    --spin-duration: var(--animation-speed-default);

    animation: clockwise var(--spin-duration) linear infinite;
}

.counter-clockwise, 
.before-counterclockwise::before, 
.after-counterclockwise::after {
    animation-direction: reverse;
}

.clockwise.before-counterclockwise::before, 
.clockwise.after-counterclockwise::after, 
.counter-clockwise.before-clockwise::before, 
.counter-clockwise.after-clockwise::after {
    animation-duration: calc(var(--spin-duration) / 2);
}

.colorFade {
    --colorFade-duration: calc(3 * var(--animation-speed-default));

    animation: colorFade var(--colorFade-duration) linear infinite;
}

.clockwise.colorFade {
    animation: clockwise var(--spin-duration) linear infinite, 
        colorFade var(--colorFade-duration) linear infinite;
}

.counter-clockwise.colorFade {
    animation: clockwise var(--spin-duration) linear infinite reverse, 
        colorFade var(--colorFade-duration) linear infinite;
}

.sq1.colorFade {
    animation: clockwise var(--spin-duration) linear infinite, 
        colorFade var(--colorFade-duration) linear infinite;
}

.sq1.counter-clockwise.colorFade {
    animation: clockwise var(--spin-duration) linear infinite reverse, 
        colorFade var(--colorFade-duration) linear infinite;
}

/* Speed-adjusting classes */

.spin-xfs, 
.before-spin-xfs::before, 
.after-spin-xfs::after {
    --spin-duration: var(--animation-speed-xfs);
}

.spin-fs, 
.before-spin-fs::before, 
.after-spin-fs::after {
    --spin-duration: var(--animation-speed-fs);
}

.spin-md, 
.before-spin-md::before, 
.after-spin-md::after {
    --spin-duration: var(--animation-speed-md);
}

.spin-sl, 
.before-spin-sl::before, 
.after-spin-sl::after {
    --spin-duration: var(--animation-speed-sl);
}

.spin-xsl, 
.before-spin-xsl::before, 
.after-spin-xsl::after {
    --spin-duration: var(--animation-speed-xsl);
}

/* Animations */

@keyframes clockwise {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes colorFade {
    0%, 100% {
        color: var(--animation-color-1)
    }

    16.66% {
        color: var(--animation-color-2)
    }

    33.33% {
        color: var(--animation-color-3)
    }

    50% {
        color: var(--animation-color-4)
    }

    66.66% {
        color: var(--animation-color-5)
    }

    83.33% {
        color: var(--animation-color-6)
    }
}