/*
 * https://dev.to/afif/i-made-100-css-loaders-for-your-next-project-4eje
 */

[class*=classic]:before {
    content: "Consultando...";
}

.continuous-1 {
    width: 95%;
    height: 3px;
    background: linear-gradient(90deg, hsl(204, 82%, 85%) 45%, hsl(204, 43%, 55%) 50%, hsl(204, 65%, 76%) 95%) hsl(204, 100%, 37%);
    background-size: 300% 100%;
    animation: ct1 1s infinite linear;
}

@keyframes ct1 {
    0% {
        background-position: right
    }
}

.arg-loader {
    width: 100%;
    height: 4px;
    background-color: hsl(200, 100%, 60%);
}

.loading {
    background: linear-gradient(90deg, #0000, hsl(195, 40%, 98%)) left -550px top 0/450px 120px no-repeat hsl(200, 100%, 60%);
    animation: ct2 2s infinite linear;
}

@keyframes ct2 {
    100% {
        background-position: right -50px top 0
    }
}

.classic-1 {
    font-weight: bold;
    font-family: Encode Sans, Arial, sans-serif;
    font-size: 14px;
    animation: c1 1s linear infinite alternate;
}

@keyframes c1 {
    to {
        opacity: 0
    }
}

.classic-2 {
    font-weight: bold;
    font-family: sans-serif;
    font-size: 30px;
    padding-bottom: 8px;
    background: linear-gradient(currentColor 0 0) bottom left/0% 3px no-repeat;
    animation: c2 2s linear infinite;
}

@keyframes c2 {
    to {
        background-size: 100% 3px
    }
}

.classic-3 {
    font-weight: bold;
    font-family: sans-serif;
    font-size: 30px;
    padding: 0 5px 8px 0;
    background: repeating-linear-gradient(90deg, currentColor 0 8%, #0000 0 10%) 200% 100%/200% 3px no-repeat;
    animation: c3 2s steps(6) infinite;
}

@keyframes c3 {
    to {
        background-position: 80% 100%
    }
}

.classic-4 {
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    clip-path: inset(0 3ch 0 0);
    animation: c4 1s steps(4) infinite;
}

@keyframes c4 {
    to {
        clip-path: inset(0 -1ch 0 0)
    }
}

.classic-5 {
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    clip-path: inset(0 100% 0 0);
    animation: c5 2s steps(11) infinite;
}

@keyframes c5 {
    to {
        clip-path: inset(0 -1ch 0 0)
    }
}

.classic-6 {
    --c: #000;
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    color: #0000;
    overflow: hidden;
    text-shadow: 0 0 var(--c), 11ch 0 var(--c);
    animation: c6 2s infinite linear;
}

@keyframes c6 {
    to {
        text-shadow: -11ch 0 var(--c), 0ch 0 var(--c)
    }
}

.classic-7 {
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    color: #0000;
    background: linear-gradient(90deg, red calc(50% + 0.5ch), #000 0) right/calc(200% + 1ch) 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: c7 2s infinite steps(11);
}

@keyframes c7 {
    to {
        background-position: left
    }
}

.classic-8 {
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    color: #0000;
    background: linear-gradient(90deg, #000 calc(50% - 0.5ch), red 0 calc(50% + 0.5ch), #000 0) right/calc(200% + 1ch) 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: c8 2s infinite steps(11);
}

@keyframes c8 {
    to {
        background-position: left
    }
}

.classic-9 {
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    color: #0000;
    overflow: hidden;
    text-shadow: 0 0 #000, 11ch 0 green, 22ch 0 red, 33ch 0 blue, 44ch 0 #000;
    animation: c9 5s infinite cubic-bezier(0.3, 1, 0, 1);
}

@keyframes c9 {
    25% {
        text-shadow: -11ch 0 #000, 0ch 0 green, 11ch 0 red, 22ch 0 blue, 33ch 0 #000
    }
    50% {
        text-shadow: -22ch 0 #000, -11ch 0 green, 0ch 0 red, 11ch 0 blue, 22ch 0 #000
    }
    75% {
        text-shadow: -33ch 0 #000, -22ch 0 green, -11ch 0 red, 0ch 0 blue, 11ch 0 #000
    }
    100% {
        text-shadow: -44ch 0 #000, -33ch 0 green, -22ch 0 red, -11ch 0 blue, 0ch 0 #000
    }
}

.classic-10 {
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    color: #0000;
    background: linear-gradient(90deg, #000 25%, green 0 50%, red 0 75%, blue 0) 0 0/400% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: c10 5s infinite cubic-bezier(0.3, 1, 0, 1);
}

@keyframes c10 {
    25% {
        background-position: calc(1*100%/3) 0
    }
    50% {
        background-position: calc(2*100%/3) 0
    }
    75% {
        background-position: calc(3*100%/3) 0
    }
    100% {
        background-position: calc(4*100%/3) 0
    }
}