fediblock-instance/public/loaders.css

/* HTML: <div class="loader"></div> */
.loader-pong {
    width: 80px;
    height: 70px;
    border: 5px solid #000;
    padding: 0 8px;
    box-sizing: border-box;
    background:
        linear-gradient(#fff 0 0) 0 0/8px 20px,
        linear-gradient(#fff 0 0) 100% 0/8px 20px,
        radial-gradient(farthest-side, #fff 90%, #0000) 0 5px/8px 8px content-box,
        #000;
    background-repeat: no-repeat;
    animation: l3 2s infinite linear;
}

@keyframes l3 {
    25% {
        background-position: 0 0, 100% 100%, 100% calc(100% - 5px)
    }

    50% {
        background-position: 0 100%, 100% 100%, 0 calc(100% - 5px)
    }

    75% {
        background-position: 0 100%, 100% 0, 100% 5px
    }
}

/* HTML: <div class="loader"></div> */
.loader-pacman {
    width: 90px;
    height: 24px;
    padding: 2px 0;
    box-sizing: border-box;
    display: flex;
    animation: l5-0 3s infinite steps(6);
    background:
        linear-gradient(#000 0 0) 0 0/0% 100% no-repeat,
        radial-gradient(circle 3px, #eeee89 90%, #0000) 0 0/20% 100% #000;
    overflow: hidden;
}

.loader-pacman::before {
    content: "";
    width: 20px;
    transform: translate(-100%);
    border-radius: 50%;
    background: #ffff2d;
    animation:
        l5-1 .25s .153s infinite steps(5) alternate,
        l5-2 3s infinite linear;
}

@keyframes l5-1 {
    0% {
        clip-path: polygon(50% 50%, 100% 0, 100% 0, 0 0, 0 100%, 100% 100%, 100% 100%)
    }

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

@keyframes l5-2 {
    100% {
        transform: translate(90px)
    }
}

@keyframes l5-0 {
    100% {
        background-size: 120% 100%, 20% 100%
    }
}

/* HTML: <div class="loader"></div> */
.loader-abyss {
    width: 80px;
    height: 60px;
    box-sizing: border-box;
    background:
        linear-gradient(#fff 0 0) left /calc(50% - 15px) 8px no-repeat,
        linear-gradient(#fff 0 0) right/calc(50% - 15px) 8px no-repeat,
        conic-gradient(from 135deg at top, #0000, red 1deg 90deg, #0000 91deg) bottom/14px 8px repeat-x,
        #000;
    border-bottom: 2px solid red;
    position: relative;
    overflow: hidden;
    animation: l6-0 1s infinite linear;
}

.loader-abyss::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 14px;
    background: lightblue;
    left: -5px;
    animation:
        l6-1 2s infinite cubic-bezier(0, 100, 1, 100),
        l6-2 2s infinite linear;
}

@keyframes l6-0 {
    50% {
        background-position: left, right, bottom -2px left -4px
    }
}

@keyframes l6-1 {

    0%,
    27% {
        bottom: calc(50% + 4px)
    }

    65%,
    100% {
        bottom: calc(50% + 4.1px)
    }
}

@keyframes l6-2 {
    100% {
        left: 100%
    }
}

/* HTML: <div class="loader"></div> */
.loader-jump {
    width: 70px;
    height: 50px;
    box-sizing: border-box;
    background:
        conic-gradient(from 135deg at top, #0000, #fff 1deg 90deg, #0000 91deg) right -20px bottom 8px/18px 9px,
        linear-gradient(#fff 0 0) bottom/100% 8px,
        #000;
    background-repeat: no-repeat;
    border-bottom: 8px solid #000;
    position: relative;
    animation: l7-0 2s infinite linear;
}

.loader-jump::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 14px;
    background: lightblue;
    left: 10px;
    animation: l7-1 2s infinite cubic-bezier(0, 200, 1, 200);
}

@keyframes l7-0 {
    100% {
        background-position: left -20px bottom 8px, bottom
    }
}

@keyframes l7-1 {

    0%,
    50% {
        bottom: 8px
    }

    90%,
    100% {
        bottom: 8.1px
    }
}

/* HTML: <div class="loader"></div> */
.loader-loading {
    width: fit-content;
    font-size: 17px;
    font-family: monospace;
    line-height: 1.4;
    font-weight: bold;
    --c: no-repeat linear-gradient(#000 0 0);
    background: var(--c), var(--c), var(--c), var(--c), var(--c), var(--c), var(--c);
    background-size: calc(1ch + 1px) 100%;
    border-bottom: 10px solid #0000;
    position: relative;
    animation: l8-0 3s infinite linear;
    clip-path: inset(-20px 0);
}

.loader-loading::before {
    content: "Loading";
}

.loader-loading::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 14px;
    background: #25adda;
    left: -10px;
    bottom: 100%;
    animation: l8-1 3s infinite linear;
}

@keyframes l8-0 {

    0%,
    12.5% {
        background-position: calc(0*100%/6) 0, calc(1*100%/6) 0, calc(2*100%/6) 0, calc(3*100%/6) 0, calc(4*100%/6) 0, calc(5*100%/6) 0, calc(6*100%/6) 0
    }

    25% {
        background-position: calc(0*100%/6) 40px, calc(1*100%/6) 0, calc(2*100%/6) 0, calc(3*100%/6) 0, calc(4*100%/6) 0, calc(5*100%/6) 0, calc(6*100%/6) 0
    }

    37.5% {
        background-position: calc(0*100%/6) 40px, calc(1*100%/6) 40px, calc(2*100%/6) 0, calc(3*100%/6) 0, calc(4*100%/6) 0, calc(5*100%/6) 0, calc(6*100%/6) 0
    }

    50% {
        background-position: calc(0*100%/6) 40px, calc(1*100%/6) 40px, calc(2*100%/6) 40px, calc(3*100%/6) 0, calc(4*100%/6) 0, calc(5*100%/6) 0, calc(6*100%/6) 0
    }

    62.5% {
        background-position: calc(0*100%/6) 40px, calc(1*100%/6) 40px, calc(2*100%/6) 40px, calc(3*100%/6) 40px, calc(4*100%/6) 0, calc(5*100%/6) 0, calc(6*100%/6) 0
    }

    75% {
        background-position: calc(0*100%/6) 40px, calc(1*100%/6) 40px, calc(2*100%/6) 40px, calc(3*100%/6) 40px, calc(4*100%/6) 40px, calc(5*100%/6) 0, calc(6*100%/6) 0
    }

    87.4% {
        background-position: calc(0*100%/6) 40px, calc(1*100%/6) 40px, calc(2*100%/6) 40px, calc(3*100%/6) 40px, calc(4*100%/6) 40px, calc(5*100%/6) 40px, calc(6*100%/6) 0
    }

    100% {
        background-position: calc(0*100%/6) 40px, calc(1*100%/6) 40px, calc(2*100%/6) 40px, calc(3*100%/6) 40px, calc(4*100%/6) 40px, calc(5*100%/6) 40px, calc(6*100%/6) 40px
    }
}

@keyframes l8-1 {
    100% {
        left: 115%
    }
}

/* HTML: <div class="loader"></div> */
.loader-avenger {
    width: fit-content;
    font-size: 17px;
    font-family: monospace;
    line-height: 1.4;
    font-weight: bold;
    background:
        linear-gradient(#000 0 0) left,
        linear-gradient(#000 0 0) right;
    background-repeat: no-repeat;
    border-right: 5px solid #0000;
    border-left: 5px solid #0000;
    background-origin: border-box;
    position: relative;
    animation: l9-0 2s infinite;
}

.loader-avenger::before {
    content: "Loading";
}

.loader-avenger::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 22px;
    height: 60px;
    background:
        linear-gradient(90deg, #000 4px, #0000 0 calc(100% - 4px), #000 0) bottom /22px 20px,
        linear-gradient(90deg, red 4px, #0000 0 calc(100% - 4px), red 0) bottom 10px left 0/22px 6px,
        linear-gradient(#000 0 0) bottom 3px left 0 /22px 8px,
        linear-gradient(#000 0 0) bottom 0 left 50%/8px 16px;
    background-repeat: no-repeat;
    animation: l9-1 2s infinite;
}

@keyframes l9-0 {

    0%,
    25% {
        background-size: 50% 100%
    }

    25.1%,
    75% {
        background-size: 0 0, 50% 100%
    }

    75.1%,
    100% {
        background-size: 0 0, 0 0
    }
}

@keyframes l9-1 {
    25% {
        background-position: bottom, bottom 54px left 0, bottom 3px left 0, bottom 0 left 50%;
        left: 0
    }

    25.1% {
        background-position: bottom, bottom 10px left 0, bottom 3px left 0, bottom 0 left 50%;
        left: 0
    }

    50% {
        background-position: bottom, bottom 10px left 0, bottom 3px left 0, bottom 0 left 50%;
        left: calc(100% - 22px)
    }

    75% {
        background-position: bottom, bottom 54px left 0, bottom 3px left 0, bottom 0 left 50%;
        left: calc(100% - 22px)
    }

    75.1% {
        background-position: bottom, bottom 10px left 0, bottom 3px left 0, bottom 0 left 50%;
        left: calc(100% - 22px)
    }
}

/* HTML: <div class="loader"></div> */
.loader-mario {
    width: fit-content;
    font-size: 17px;
    font-family: monospace;
    line-height: 1.4;
    font-weight: bold;
    padding: 30px 2px 50px;
    background: linear-gradient(#000 0 0) 0 0/100% 100% content-box padding-box no-repeat;
    position: relative;
    overflow: hidden;
    animation: l10-0 2s infinite cubic-bezier(1, 175, .5, 175);
}

.loader-mario::before {
    content: "Loading";
    display: inline-block;
    animation: l10-2 2s infinite;
}

.loader-mario::after {
    content: "";
    position: absolute;
    width: 34px;
    height: 28px;
    top: 110%;
    left: calc(50% - 16px);
    background:
        linear-gradient(90deg, #0000 12px, #f92033 0 22px, #0000 0 26px, #fdc98d 0 32px, #0000) bottom 26px left 50%,
        linear-gradient(90deg, #0000 10px, #f92033 0 28px, #fdc98d 0 32px, #0000 0) bottom 24px left 50%,
        linear-gradient(90deg, #0000 10px, #643700 0 16px, #fdc98d 0 20px, #000 0 22px, #fdc98d 0 24px, #000 0 26px, #f92033 0 32px, #0000 0) bottom 22px left 50%,
        linear-gradient(90deg, #0000 8px, #643700 0 10px, #fdc98d 0 12px, #643700 0 14px, #fdc98d 0 20px, #000 0 22px, #fdc98d 0 28px, #f92033 0 32px, #0000 0) bottom 20px left 50%,
        linear-gradient(90deg, #0000 8px, #643700 0 10px, #fdc98d 0 12px, #643700 0 16px, #fdc98d 0 22px, #000 0 24px, #fdc98d 0 30px, #f92033 0 32px, #0000 0) bottom 18px left 50%,
        linear-gradient(90deg, #0000 8px, #643700 0 12px, #fdc98d 0 20px, #000 0 28px, #f92033 0 30px, #0000 0) bottom 16px left 50%,
        linear-gradient(90deg, #0000 12px, #fdc98d 0 26px, #f92033 0 30px, #0000 0) bottom 14px left 50%,
        linear-gradient(90deg, #fdc98d 6px, #f92033 0 14px, #222a87 0 16px, #f92033 0 22px, #222a87 0 24px, #f92033 0 28px, #0000 0 32px, #643700 0) bottom 12px left 50%,
        linear-gradient(90deg, #fdc98d 6px, #f92033 0 16px, #222a87 0 18px, #f92033 0 24px, #f92033 0 26px, #0000 0 30px, #643700 0) bottom 10px left 50%,
        linear-gradient(90deg, #0000 10px, #f92033 0 16px, #222a87 0 24px, #feee49 0 26px, #222a87 0 30px, #643700 0) bottom 8px left 50%,
        linear-gradient(90deg, #0000 12px, #222a87 0 18px, #feee49 0 20px, #222a87 0 30px, #643700 0) bottom 6px left 50%,
        linear-gradient(90deg, #0000 8px, #643700 0 12px, #222a87 0 30px, #643700 0) bottom 4px left 50%,
        linear-gradient(90deg, #0000 6px, #643700 0 14px, #222a87 0 26px, #0000 0) bottom 2px left 50%,
        linear-gradient(90deg, #0000 6px, #643700 0 10px, #0000 0) bottom 0px left 50%;
    background-size: 34px 2px;
    background-repeat: no-repeat;
    animation: inherit;
    animation-name: l10-1;
}

@keyframes l10-0 {

    0%,
    30% {
        background-position: 0 0px
    }

    50%,
    100% {
        background-position: 0 -0.1px
    }
}

@keyframes l10-1 {

    50%,
    100% {
        top: 109.5%
    }

    ;
}

@keyframes l10-2 {

    0%,
    30% {
        transform: translateY(0);
    }

    80%,
    100% {
        transform: translateY(-260%);
    }
}