Logo

Geekaxon

Welcome User

Style 1

<div class="loader-wrapper">
    <span class="loader style-1"></span>
</div>
:root {
    --light-base-background:#fff; 
}
.loader-wrapper {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    background-color: var(--light-base-background);
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
}
.loader-wrapper .loader {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}
.loader.style-1 {
    font-family: sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.2rem;
    -webkit-animation: loaderstyle1 1s linear infinite alternate;
        animation: loaderstyle1 1s linear infinite alternate;
}
.loader.style-1::before {
    content: "Loading...";
}
@-webkit-keyframes loaderstyle1 {
    to {
        opacity: 0;
    }
}
@keyframes loaderstyle1 {
    to {
        opacity: 0;
    }
}

Style 2

<div class="loader-wrapper">
    <span class="loader style-2"></span>
</div>
:root {
    --light-base-background:#fff; 
}
.loader-wrapper {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    background-color: var(--light-base-background);
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
}
.loader-wrapper .loader {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}
.loader.style-2 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-family: sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.2rem;
    padding-bottom: 8px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, currentColor)) 0 100%/0% 3px no-repeat;
    background: linear-gradient(currentColor 0 0) 0 100%/0% 3px no-repeat;
    -webkit-animation: loaderstyle2 2s linear infinite;
        animation: loaderstyle2 2s linear infinite;
}
.loader.style-2::before {
    content: "Loading...";
}
@-webkit-keyframes loaderstyle2 {
    to {
        background-size: 100% 3px;
    }
}
@keyframes loaderstyle2 {
    to {
        background-size: 100% 3px;
    }
}

Style 3

<div class="loader-wrapper">
    <span class="loader style-3"></span>
</div>
:root {
    --light-base-background:#fff; 
}
.loader-wrapper {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    background-color: var(--light-base-background);
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
}
.loader-wrapper .loader {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}
.loader.style-3 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-family: sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.2rem;
    padding: 0 5px 8px 0;
    background: repeating-linear-gradient(90deg, currentColor 0 8%, rgba(0, 0, 0, 0) 0 10%);
    background-size: 200% 3px;
    background-position: 200% 100%;
    background-repeat: no-repeat;
    -webkit-animation: loaderstyle3 2s steps(6) infinite;
            animation: loaderstyle3 2s steps(6) infinite;
}
.loader.style-3::before {
    content: "Loading...";
}
@-webkit-keyframes loaderstyle3 {
    to {
        background-position: 80% 100%;
    }
}
@keyframes loaderstyle3 {
    to {
        background-position: 80% 100%;
    }
}

Style 4

<div class="loader-wrapper">
    <span class="loader style-4"></span>
</div>
:root {
    --light-base-background:#fff; 
}
.loader-wrapper {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    background-color: var(--light-base-background);
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
}
.loader-wrapper .loader {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}
.loader.style-4 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-family: monospace;
    font-size: 30px;
    line-height: 1.2rem;
    -webkit-clip-path: inset(0 1ch 0 0);
            clip-path: inset(0 1ch 0 0);
    -webkit-animation: loaderstyle4 1s steps(3) infinite;
            animation: loaderstyle4 1s steps(3) infinite;
}
.loader.style-4::before {
    content: "Loading...";
}
@-webkit-keyframes loaderstyle4 {
    to {
        -webkit-clip-path: inset(0 -1ch 0 0);
                clip-path: inset(0 -1ch 0 0);
    }
}
@keyframes loaderstyle4 {
    to {
        -webkit-clip-path: inset(0 -1ch 0 0);
                clip-path: inset(0 -1ch 0 0);
    }
}

Style 5

<div class="loader-wrapper">
    <span class="loader style-5"></span>
</div>
:root {
    --light-base-background:#fff; 
}
.loader-wrapper {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    background-color: var(--light-base-background);
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
}
.loader-wrapper .loader {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}
.loader.style-5 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-family: monospace;
    font-size: 30px;
    line-height: 1.2rem;
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
    -webkit-animation: loaderstyle5 2s steps(11) infinite;
            animation: loaderstyle5 2s steps(11) infinite;
}
.loader.style-5::before {
    content: "Loading...";
}
@-webkit-keyframes loaderstyle5 {
  to {
    -webkit-clip-path: inset(0 -1ch 0 0);
            clip-path: inset(0 -1ch 0 0);
  }
}
@keyframes loaderstyle5 {
  to {
    -webkit-clip-path: inset(0 -1ch 0 0);
            clip-path: inset(0 -1ch 0 0);
  }
}

Style 6

<div class="loader-wrapper">
    <span class="loader style-6"></span>
</div>
:root {
    --light-base-background:#fff;
    --light-text: #535353;
}
.loader-wrapper {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    background-color: var(--light-base-background);
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
}
.loader-wrapper .loader {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}
.loader.style-6 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-family: monospace;
    font-weight: bold;
    font-size: 30px;
    line-height: 1.2rem;
    overflow: hidden;
    color: transparent;
    text-shadow: 0 0 var(--light-text), 11ch 0 var(--light-text);
    -webkit-animation: lightLoaderStyle6 2s infinite linear;
            animation: lightLoaderStyle6 2s infinite linear;
}
.loader.style-6::before {
    content: "Loading...";
}
@-webkit-keyframes lightLoaderStyle6 {
    to {
        text-shadow: -11ch 0 var(--light-text), 0ch 0 var(--light-text);
    }
}
@keyframes lightLoaderStyle6 {
    to {
        text-shadow: -11ch 0 var(--light-text), 0ch 0 var(--light-text);
    }
}

Style 7

<div class="loader-wrapper">
    <span class="loader style-7"></span>
</div>
:root {
    --light-base-background:#fff;
    --light-text: #535353;
    --light-danger-1: #f93131;
}
.loader-wrapper {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    background-color: var(--light-base-background);
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
}
.loader-wrapper .loader {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}
.loader.style-7 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-family: monospace;
    font-weight: bold;
    font-size: 30px;
    line-height: 1.2rem;
    color: transparent;
    background: -webkit-gradient(linear, left top, right top, from(var(--light-danger-1)), color-stop(0, var(--light-text))) right/calc(200% + 1ch) 100%;
    background: linear-gradient(90deg, var(--light-danger-1) calc(50% + 0.5ch), var(--light-text) 0) right/calc(200% + 1ch) 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-animation: loaderStyle7 2s infinite steps(11);
            animation: loaderStyle7 2s infinite steps(11);
}
.loader.style-7::before {
    content: "Loading...";
}
@-webkit-keyframes loaderStyle7 {
    to {
        background-position: left;
    }
}
@keyframes loaderStyle7 {
    to {
        background-position: left;
    }
}

Style 8

<div class="loader-wrapper">
    <span class="loader style-8"></span>
</div>
:root {
    --light-base-background:#fff;
    --light-text: #535353;
    --light-danger-1: #f93131;
}
.loader-wrapper {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    background-color: var(--light-base-background);
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
}
.loader-wrapper .loader {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}
.loader.style-8 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-family: monospace;
    font-weight: bold;
    font-size: 30px;
    line-height: 1.2rem;
    color: transparent;
    background: -webkit-gradient(linear, left top, right top, from(var(--light-text)), color-stop(0, var(--light-danger-1)), color-stop(0, var(--light-text))) right/calc(200% + 1ch) 100%;
    background: linear-gradient(90deg, var(--light-text) calc(50% - 0.5ch), var(--light-danger-1) 0 calc(50% + 0.5ch), var(--light-text) 0) right/calc(200% + 1ch) 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-animation: loaderStyle8 2s infinite steps(11);
        animation: loaderStyle8 2s infinite steps(11);
}
.loader.style-8::before {
    content: "Loading...";
}
@-webkit-keyframes loaderStyle8 {
    to {
        background-position: left;
    }
}
@keyframes loaderStyle8 {
    to {
        background-position: left;
    }
}

Style 9

<div class="loader-wrapper">
    <span class="loader style-9"></span>
</div>
:root {
    --light-base-background:#fff;
    --light-text: #535353;
    --light-info-1: #06b9ef;
    --light-warning-1: #ff960b;
    --light-danger-1: #f93131;
}
.loader-wrapper {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    background-color: var(--light-base-background);
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
}
.loader-wrapper .loader {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}
.loader.style-9 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-family: monospace;
    font-weight: bold;
    font-size: 30px;
    line-height: 1.2rem;
    color: transparent;
    overflow: hidden;
    -webkit-animation: lightLoaderStyle9 5s infinite cubic-bezier(0.3, 1, 0, 1);
            animation: lightLoaderStyle9 5s infinite cubic-bezier(0.3, 1, 0, 1);
}
.loader.style-9::before {
    content: "Loading...";
}
@-webkit-keyframes lightLoaderStyle9 {
    0% {
        text-shadow: 0 0 var(--light-text), 11ch 0 var(--light-warning-1), 22ch 0 var(--light-danger-1), 33ch 0 var(--light-info-1), 44ch 0 var(--light-text);
    }
    25% {
        text-shadow: -11ch 0 var(--light-text), 0ch 0 var(--light-warning-1), 11ch 0 var(--light-danger-1), 22ch 0 var(--light-info-1), 33ch 0 var(--light-text);
    }
    50% {
        text-shadow: -22ch 0 var(--light-text), -11ch 0 var(--light-warning-1), 0ch 0 var(--light-danger-1), 11ch 0 var(--light-info-1), 22ch 0 var(--light-text);
    }
    75% {
        text-shadow: -33ch 0 var(--light-text), -22ch 0 var(--light-warning-1), -11ch 0 var(--light-danger-1), 0ch 0 var(--light-info-1), 11ch 0 var(--light-text);
    }
    100% {
        text-shadow: -44ch 0 var(--light-text), -33ch 0 var(--light-warning-1), -22ch 0 var(--light-danger-1), -11ch 0 var(--light-info-1), 0ch 0 var(--light-text);
    }
}
@keyframes lightLoaderStyle9 {
    0% {
        text-shadow: 0 0 var(--light-text), 11ch 0 var(--light-warning-1), 22ch 0 var(--light-danger-1), 33ch 0 var(--light-info-1), 44ch 0 var(--light-text);
    }
    25% {
        text-shadow: -11ch 0 var(--light-text), 0ch 0 var(--light-warning-1), 11ch 0 var(--light-danger-1), 22ch 0 var(--light-info-1), 33ch 0 var(--light-text);
    }
    50% {
        text-shadow: -22ch 0 var(--light-text), -11ch 0 var(--light-warning-1), 0ch 0 var(--light-danger-1), 11ch 0 var(--light-info-1), 22ch 0 var(--light-text);
    }
    75% {
        text-shadow: -33ch 0 var(--light-text), -22ch 0 var(--light-warning-1), -11ch 0 var(--light-danger-1), 0ch 0 var(--light-info-1), 11ch 0 var(--light-text);
    }
    100% {
        text-shadow: -44ch 0 var(--light-text), -33ch 0 var(--light-warning-1), -22ch 0 var(--light-danger-1), -11ch 0 var(--light-info-1), 0ch 0 var(--light-text);
    }
}

Style 10

<div class="loader-wrapper">
    <span class="loader style-10"></span>
</div>
:root {
    --light-base-background:#fff;
    --light-text: #535353;
    --light-info-1: #06b9ef;
    --light-warning-1: #ff960b;
    --light-danger-1: #f93131;
}
.loader-wrapper {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    background-color: var(--light-base-background);
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
}
.loader-wrapper .loader {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}
.loader.style-10 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-family: monospace;
    font-weight: bold;
    font-size: 30px;
    line-height: 1.2rem;
    color: transparent;
    background: -webkit-gradient(linear, left top, right top, color-stop(25%, var(--light-text)), color-stop(0, var(--light-warning-1)), color-stop(0, var(--light-danger-1)), color-stop(0, var(--light-info-1))) 0 0/400% 100%;
    background: linear-gradient(90deg, var(--light-text) 25%, var(--light-warning-1) 0 50%, var(--light-danger-1) 0 75%, var(--light-info-1) 0) 0 0/400% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-animation: loaderStyle10 5s infinite cubic-bezier(0.3, 1, 0, 1);
            animation: loaderStyle10 5s infinite cubic-bezier(0.3, 1, 0, 1);
}
.loader.style-10::before {
    content: "Loading...";
}
@-webkit-keyframes loaderStyle10 {
    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;
    }
}
@keyframes loaderStyle10 {
    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;
    }
}

Style 11

<div class="loader-wrapper">
    <span class="loader style-11"></span>
</div>
:root {
    --light-base-background:#fff;
    --light-text: #535353;
}
.loader-wrapper {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    background-color: var(--light-base-background);
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
}
.loader-wrapper .loader {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}
.loader.style-11 {
    font-family: monospace;
    font-weight: bold;
    font-size: 30px;
    line-height: 1.2rem;
    display: inline-grid;
}
.loader.style-11::before, .loader.style-11::after {
    content: "Loading...";
    grid-area: 1/1;
    -webkit-mask: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--light-text)), color-stop(0, transparent)) 0 50%/2ch 100%;
    -webkit-mask: linear-gradient(90deg, var(--light-text) 50%, transparent 0) 0 50%/2ch 100%;
    -webkit-animation: loaderStyle11 1s infinite cubic-bezier(0.5, 220, 0.5, -220);
            animation: loaderStyle11 1s infinite cubic-bezier(0.5, 220, 0.5, -220);
}
.loader.style-11::after {
    -webkit-mask-position: 1ch 50%;
    --lS11:-1;
}
@-webkit-keyframes loaderStyle11 {
    100% {
        -webkit-transform: translateY(calc(var(--lS11,1)*0.1%));
            transform: translateY(calc(var(--lS11,1)*0.1%));
    }
}
@keyframes loaderStyle11 {
    100% {
       -webkit-transform: translateY(calc(var(--lS11,1)*0.1%));
            transform: translateY(calc(var(--lS11,1)*0.1%));
    }
}

Style 12

<div class="loader-wrapper">
    <span class="loader style-12"></span>
</div>
:root {
    --light-base-background:#fff;
}
.loader-wrapper {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    background-color: var(--light-base-background);
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
}
.loader-wrapper .loader {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}
.loader.style-12 {
    font-family: monospace;
    font-weight: bold;
    font-size: 30px;
    line-height: 1.2rem;
    display: inline-grid;
    overflow: hidden;
}
.loader.style-12::before, .loader.style-12::after {
    content: "Loading...";
    grid-area: 1/1;
    -webkit-clip-path: inset(0 -200% 50%);
        clip-path: inset(0 -200% 50%);
    text-shadow: -10ch 0 0;
    -webkit-animation: loaderStyle12 1s infinite;
        animation: loaderStyle12 1s infinite;
}
.loader.style-12::after {
    -webkit-clip-path: inset(50% -200% 0%);
        clip-path: inset(50% -200% 0%);
    text-shadow: 10ch 0 0;
    --lS12:-1;
}
@-webkit-keyframes loaderStyle12 {
    50%,100% {
        -webkit-transform: translateX(calc(var(--lS12,1)*100%));
            transform: translateX(calc(var(--lS12,1)*100%));
    }
}
@keyframes loaderStyle12 {
    50%,100% {
        -webkit-transform: translateX(calc(var(--lS12,1)*100%));
            transform: translateX(calc(var(--lS12,1)*100%));
    }
}

Style 13

<div class="loader-wrapper">
    <span class="loader style-13"></span>
</div>
:root {
    --light-base-background:#fff;
}
.loader-wrapper {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    background-color: var(--light-base-background);
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
}
.loader-wrapper .loader {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}
.loader.style-13 {
    font-family: monospace;
    font-weight: bold;
    font-size: 30px;
    line-height: 1.2rem;
    display: inline-grid;
    overflow: hidden;
}
.loader.style-13::before, .loader.style-13::after {
    content: "Loading...";
    grid-area: 1/1;
    -webkit-clip-path: inset(0 -200% 50%);
            clip-path: inset(0 -200% 50%);
    text-shadow: -10ch 0 0;
    -webkit-animation: loaderStyle13 2s infinite;
            animation: loaderStyle13 2s infinite;
}
.loader.style-13 .loader:after {
    -webkit-clip-path: inset(50% -200% 0%);
            clip-path: inset(50% -200% 0%);
    text-shadow: 10ch 0 0;
    --lS13:-1;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
}
@-webkit-keyframes loaderStyle13 {
    25%,100% {
        -webkit-transform: translateX(calc(var(--lS13,1)*100%));
                transform: translateX(calc(var(--lS13,1)*100%));
    }
}
@keyframes loaderStyle13 {
    25%,100% {
        -webkit-transform: translateX(calc(var(--lS13,1)*100%));
                transform: translateX(calc(var(--lS13,1)*100%));
    }
}

Style 14

<div class="loader-wrapper">
    <span class="loader style-14"></span>
</div>
:root {
    --light-base-background:#fff;
    --light-text: #535353;
}
.loader-wrapper {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    background-color: var(--light-base-background);
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
}
.loader-wrapper .loader {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}
.loader.style-14 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding-bottom: 5px;
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    line-height: 1.2rem;
    overflow: hidden;
    color: transparent;
    text-shadow: 0 0 0 var(--light-text), 10ch 0 0 var(--light-text);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--light-text))) bottom left/0% 3px no-repeat;
    background: linear-gradient(var(--light-text) 0 0) bottom left/0% 3px no-repeat;
    -webkit-animation: lightLoaderStyle14 1.5s infinite;
        animation: lightLoaderStyle14 1.5s infinite;
}
.loader.style-14::before {
    content: "Loading...";
}
@-webkit-keyframes lightLoaderStyle14 {
    80% {
        text-shadow: 0 0 0 var(--light-text), 10ch 0 0 var(--light-text);
        background-size: 100% 3px;
    }
    100% {
        text-shadow: -10ch 0 0 var(--light-text), 0 0 0 var(--light-text);
    }
}
@keyframes lightLoaderStyle14 {
    80% {
        text-shadow: 0 0 0 var(--light-text), 10ch 0 0 var(--light-text);
        background-size: 100% 3px;
    }
    100% {
        text-shadow: -10ch 0 0 var(--light-text), 0 0 0 var(--light-text);
    }
}

Style 15

<div class="loader-wrapper">
    <span class="loader style-15"></span>
</div>
:root {
    --light-base-background:#fff;
    --light-text: #535353;
}
.loader-wrapper {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    background-color: var(--light-base-background);
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
}
.loader-wrapper .loader {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}

.loader.style-15 {
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    line-height: 1.2rem;
    display: inline-grid;
}
.loader.style-15::before, .loader.style-15::after {
    content: "Loading...";
    grid-area: 1/1;
    -webkit-mask: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--light-text)), color-stop(0, transparent)) 0 50%/2ch 100%;
    -webkit-mask: linear-gradient(90deg, var(--light-text) 50%, transparent 0) 0 50%/2ch 100%;
    color: transparent;
    text-shadow: 0 0 0 var(--light-text), 0 calc(var(--lS15,1)*1.2rem) 0 var(--light-text);
    -webkit-animation: lightLoaderStyle15 1s infinite;
            animation: lightLoaderStyle15 1s infinite;
}
.loader.style-15::after {
    -webkit-mask-position: 1ch 50%;
    --lS15:-1;
}
@-webkit-keyframes lightLoaderStyle15 {
    80%,100% {
        text-shadow: 0 calc(var(--lS15,1)*-1.2rem) 0 var(--light-text), 0 0 0 var(--light-text);
    }
}
@keyframes lightLoaderStyle15 {
    80%,100% {
        text-shadow: 0 calc(var(--lS15,1)*-1.2rem) 0 var(--light-text), 0 0 0 var(--light-text);
    }
}

Style 16

<div class="loader-wrapper">
    <span class="loader style-16"></span>
</div>
:root {
    --light-base-background: #fff;
    --light-border-color-1: #d2d2d2;
    --light-primary-light: #a2a1ff;
    --light-primary-actived-background: #4946d3;
    --light-success-1: #00aa44;
    --light-info-1: #06b9ef;
    --light-warning-1: #ff960b;
    --light-warning-1-actived-background: #da7d04;
    --light-danger-1: #f93131;
}
.loader-wrapper {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    background-color: var(--light-base-background);
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
}
.loader-wrapper .loader {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}
.loader.style-16 {
    --lSW16:10ch;
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    line-height: 1.2rem;
    letter-spacing: var(--lSW16);
    width: var(--lSW16);
    overflow: hidden;
    white-space: nowrap;
    text-shadow: calc(-1*var(--lSW16)) 0, calc(-2*var(--lSW16)) 0, calc(-3*var(--lSW16)) 0, calc(-4*var(--lSW16)) 0, calc(-5*var(--lSW16)) 0, calc(-6*var(--lSW16)) 0, calc(-7*var(--lSW16)) 0, calc(-8*var(--lSW16)) 0, calc(-9*var(--lSW16)) 0;
    -webkit-animation: lightLoaderStyle16 2s infinite;
            animation: lightLoaderStyle16 2s infinite;
}
.loader.style-16::before {
    content: "Loading...";
}
@-webkit-keyframes lightLoaderStyle16 {
    20% {
        text-shadow: calc(-1*var(--lSW16)) 0, calc(-2*var(--lSW16)) 0 var(--light-danger-1), calc(-3*var(--lSW16)) 0, calc(-4*var(--lSW16)) 0 var(--light-warning-1), calc(-5*var(--lSW16)) 0 var(--light-info-1), calc(-6*var(--lSW16)) 0, calc(-7*var(--lSW16)) 0, calc(-8*var(--lSW16)) 0 var(--light-success-1), calc(-9*var(--lSW16)) 0;
    }
    40% {
        text-shadow: calc(-1*var(--lSW16)) 0, calc(-2*var(--lSW16)) 0 var(--light-danger-1), calc(-3*var(--lSW16)) 0 var(--light-primary-actived-background), calc(-4*var(--lSW16)) 0, calc(-5*var(--lSW16)) 0 var(--light-success-1), calc(-6*var(--lSW16)) 0 var(--light-warning-1-actived-background), calc(-7*var(--lSW16)) 0, calc(-8*var(--lSW16)) 0 var(--light-success-1), calc(-9*var(--lSW16)) 0;
    }
    60% {
        text-shadow: calc(-1*var(--lSW16)) 0 var(--light-primary-light), calc(-2*var(--lSW16)) 0, calc(-3*var(--lSW16)) 0 var(--light-primary-actived-background), calc(-4*var(--lSW16)) 0, calc(-5*var(--lSW16)) 0 var(--light-success-1), calc(-6*var(--lSW16)) 0, calc(-7*var(--lSW16)) 0 var(--light-warning-1), calc(-8*var(--lSW16)) 0 var(--light-warning-1-actived-background), calc(-9*var(--lSW16)) 0 var(--light-danger-1);
    }
    80% {
        text-shadow: calc(-1*var(--lSW16)) 0 var(--light-primary-light), calc(-2*var(--lSW16)) 0 var(--light-warning-1), calc(-3*var(--lSW16)) 0 var(--light-info-1), calc(-4*var(--lSW16)) 0 var(--light-warning-1-actived-background), calc(-5*var(--lSW16)) 0 var(--light-danger-1), calc(-6*var(--lSW16)) 0, calc(-7*var(--lSW16)) 0 var(--light-border-color-1), calc(-8*var(--lSW16)) 0 var(--light-info-1), calc(-9*var(--lSW16)) 0;
    }
}
@keyframes lightLoaderStyle16 {
    20% {
        text-shadow: calc(-1*var(--lSW16)) 0, calc(-2*var(--lSW16)) 0 var(--light-danger-1), calc(-3*var(--lSW16)) 0, calc(-4*var(--lSW16)) 0 var(--light-warning-1), calc(-5*var(--lSW16)) 0 var(--light-info-1), calc(-6*var(--lSW16)) 0, calc(-7*var(--lSW16)) 0, calc(-8*var(--lSW16)) 0 var(--light-success-1), calc(-9*var(--lSW16)) 0;
    }
    40% {
        text-shadow: calc(-1*var(--lSW16)) 0, calc(-2*var(--lSW16)) 0 var(--light-danger-1), calc(-3*var(--lSW16)) 0 var(--light-primary-actived-background), calc(-4*var(--lSW16)) 0, calc(-5*var(--lSW16)) 0 var(--light-success-1), calc(-6*var(--lSW16)) 0 var(--light-warning-1-actived-background), calc(-7*var(--lSW16)) 0, calc(-8*var(--lSW16)) 0 var(--light-success-1), calc(-9*var(--lSW16)) 0;
    }
    60% {
        text-shadow: calc(-1*var(--lSW16)) 0 var(--light-primary-light), calc(-2*var(--lSW16)) 0, calc(-3*var(--lSW16)) 0 var(--light-primary-actived-background), calc(-4*var(--lSW16)) 0, calc(-5*var(--lSW16)) 0 var(--light-success-1), calc(-6*var(--lSW16)) 0, calc(-7*var(--lSW16)) 0 var(--light-warning-1), calc(-8*var(--lSW16)) 0 var(--light-warning-1-actived-background), calc(-9*var(--lSW16)) 0 var(--light-danger-1);
    }
    80% {
        text-shadow: calc(-1*var(--lSW16)) 0 var(--light-primary-light), calc(-2*var(--lSW16)) 0 var(--light-warning-1), calc(-3*var(--lSW16)) 0 var(--light-info-1), calc(-4*var(--lSW16)) 0 var(--light-warning-1-actived-background), calc(-5*var(--lSW16)) 0 var(--light-danger-1), calc(-6*var(--lSW16)) 0, calc(-7*var(--lSW16)) 0 var(--light-border-color-1), calc(-8*var(--lSW16)) 0 var(--light-info-1), calc(-9*var(--lSW16)) 0;
    }
}

Style 17

<div class="loader-wrapper">
    <span class="loader style-17"></span>
</div>
:root {
    --light-base-background: #fff;
    --light-text: #535353;
}
.loader-wrapper {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    background-color: var(--light-base-background);
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
}
.loader-wrapper .loader {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}
.loader.style-17 {
    --lSW17:10ch;
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    line-height: 1.2rem;
    letter-spacing: var(--lSW17);
    width: var(--lSW17);
    overflow: hidden;
    white-space: nowrap;
    color: transparent;
    -webkit-animation: lightLoaderStyle17 2.5s infinite;
        animation: lightLoaderStyle17 2.5s infinite;
}
.loader.style-17::before {
    content: "Loading...";
}
@-webkit-keyframes lightLoaderStyle17 {
    0% {
        text-shadow: calc( 0*var(--lSW17)) -1.2rem var(--light-text), calc(-1*var(--lSW17)) -1.2rem var(--light-text), calc(-2*var(--lSW17)) -1.2rem var(--light-text), calc(-3*var(--lSW17)) -1.2rem var(--light-text), calc(-4*var(--lSW17)) -1.2rem var(--light-text), calc(-5*var(--lSW17)) -1.2rem var(--light-text), calc(-6*var(--lSW17)) -1.2rem var(--light-text), calc(-7*var(--lSW17)) -1.2rem var(--light-text), calc(-8*var(--lSW17)) -1.2rem var(--light-text), calc(-9*var(--lSW17)) -1.2rem var(--light-text);
    }
    4% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) -1.2rem var(--light-text), calc(-2*var(--lSW17)) -1.2rem var(--light-text), calc(-3*var(--lSW17)) -1.2rem var(--light-text), calc(-4*var(--lSW17)) -1.2rem var(--light-text), calc(-5*var(--lSW17)) -1.2rem var(--light-text), calc(-6*var(--lSW17)) -1.2rem var(--light-text), calc(-7*var(--lSW17)) -1.2rem var(--light-text), calc(-8*var(--lSW17)) -1.2rem var(--light-text), calc(-9*var(--lSW17)) -1.2rem var(--light-text);
    }
    8% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) -1.2rem var(--light-text), calc(-3*var(--lSW17)) -1.2rem var(--light-text), calc(-4*var(--lSW17)) -1.2rem var(--light-text), calc(-5*var(--lSW17)) -1.2rem var(--light-text), calc(-6*var(--lSW17)) -1.2rem var(--light-text), calc(-7*var(--lSW17)) -1.2rem var(--light-text), calc(-8*var(--lSW17)) -1.2rem var(--light-text), calc(-9*var(--lSW17)) -1.2rem var(--light-text);
    }
    12% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) -1.2rem var(--light-text), calc(-4*var(--lSW17)) -1.2rem var(--light-text), calc(-5*var(--lSW17)) -1.2rem var(--light-text), calc(-6*var(--lSW17)) -1.2rem var(--light-text), calc(-7*var(--lSW17)) -1.2rem var(--light-text), calc(-8*var(--lSW17)) -1.2rem var(--light-text), calc(-9*var(--lSW17)) -1.2rem var(--light-text);
    }
    16% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) -1.2rem var(--light-text), calc(-5*var(--lSW17)) -1.2rem var(--light-text), calc(-6*var(--lSW17)) -1.2rem var(--light-text), calc(-7*var(--lSW17)) -1.2rem var(--light-text), calc(-8*var(--lSW17)) -1.2rem var(--light-text), calc(-9*var(--lSW17)) -1.2rem var(--light-text);
    }
    20% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) 0 var(--light-text), calc(-5*var(--lSW17)) -1.2rem var(--light-text), calc(-6*var(--lSW17)) -1.2rem var(--light-text), calc(-7*var(--lSW17)) -1.2rem var(--light-text), calc(-8*var(--lSW17)) -1.2rem var(--light-text), calc(-9*var(--lSW17)) -1.2rem var(--light-text);
    }
    24% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) 0 var(--light-text), calc(-5*var(--lSW17)) 0 var(--light-text), calc(-6*var(--lSW17)) -1.2rem var(--light-text), calc(-7*var(--lSW17)) -1.2rem var(--light-text), calc(-8*var(--lSW17)) -1.2rem var(--light-text), calc(-9*var(--lSW17)) -1.2rem var(--light-text);
    }
    28% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) 0 var(--light-text), calc(-5*var(--lSW17)) 0 var(--light-text), calc(-6*var(--lSW17)) 0 var(--light-text), calc(-7*var(--lSW17)) -1.2rem var(--light-text), calc(-8*var(--lSW17)) -1.2rem var(--light-text), calc(-9*var(--lSW17)) -1.2rem var(--light-text);
    }
    32% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) 0 var(--light-text), calc(-5*var(--lSW17)) 0 var(--light-text), calc(-6*var(--lSW17)) 0 var(--light-text), calc(-7*var(--lSW17)) 0 var(--light-text), calc(-8*var(--lSW17)) -1.2rem var(--light-text), calc(-9*var(--lSW17)) -1.2rem var(--light-text);
    }
    36% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) 0 var(--light-text), calc(-5*var(--lSW17)) 0 var(--light-text), calc(-6*var(--lSW17)) 0 var(--light-text), calc(-7*var(--lSW17)) 0 var(--light-text), calc(-8*var(--lSW17)) 0 var(--light-text), calc(-9*var(--lSW17)) -1.2rem var(--light-text);
    }
    40%,
      60% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) 0 var(--light-text), calc(-5*var(--lSW17)) 0 var(--light-text), calc(-6*var(--lSW17)) 0 var(--light-text), calc(-7*var(--lSW17)) 0 var(--light-text), calc(-8*var(--lSW17)) 0 var(--light-text), calc(-9*var(--lSW17)) 0 var(--light-text);
    }
    64% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) 0 var(--light-text), calc(-5*var(--lSW17)) 0 var(--light-text), calc(-6*var(--lSW17)) 0 var(--light-text), calc(-7*var(--lSW17)) 0 var(--light-text), calc(-8*var(--lSW17)) 0 var(--light-text), calc(-9*var(--lSW17)) 1.2rem var(--light-text);
    }
    68% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) 0 var(--light-text), calc(-5*var(--lSW17)) 0 var(--light-text), calc(-6*var(--lSW17)) 0 var(--light-text), calc(-7*var(--lSW17)) 0 var(--light-text), calc(-8*var(--lSW17)) 1.2rem var(--light-text), calc(-9*var(--lSW17)) 1.2rem var(--light-text);
    }
    72% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) 0 var(--light-text), calc(-5*var(--lSW17)) 0 var(--light-text), calc(-6*var(--lSW17)) 0 var(--light-text), calc(-7*var(--lSW17)) 1.2rem var(--light-text), calc(-8*var(--lSW17)) 1.2rem var(--light-text), calc(-9*var(--lSW17)) 1.2rem var(--light-text);
    }
    76% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) 0 var(--light-text), calc(-5*var(--lSW17)) 0 var(--light-text), calc(-6*var(--lSW17)) 1.2rem var(--light-text), calc(-7*var(--lSW17)) 1.2rem var(--light-text), calc(-8*var(--lSW17)) 1.2rem var(--light-text), calc(-9*var(--lSW17)) 1.2rem var(--light-text);
    }
    80% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) 0 var(--light-text), calc(-5*var(--lSW17)) 1.2rem var(--light-text), calc(-6*var(--lSW17)) 1.2rem var(--light-text), calc(-7*var(--lSW17)) 1.2rem var(--light-text), calc(-8*var(--lSW17)) 1.2rem var(--light-text), calc(-9*var(--lSW17)) 1.2rem var(--light-text);
    }
    84% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) 1.2rem var(--light-text), calc(-5*var(--lSW17)) 1.2rem var(--light-text), calc(-6*var(--lSW17)) 1.2rem var(--light-text), calc(-7*var(--lSW17)) 1.2rem var(--light-text), calc(-8*var(--lSW17)) 1.2rem var(--light-text), calc(-9*var(--lSW17)) 1.2rem var(--light-text);
    }
    88% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 1.2rem var(--light-text), calc(-4*var(--lSW17)) 1.2rem var(--light-text), calc(-5*var(--lSW17)) 1.2rem var(--light-text), calc(-6*var(--lSW17)) 1.2rem var(--light-text), calc(-7*var(--lSW17)) 1.2rem var(--light-text), calc(-8*var(--lSW17)) 1.2rem var(--light-text), calc(-9*var(--lSW17)) 1.2rem var(--light-text);
    }
    92% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 1.2rem var(--light-text), calc(-3*var(--lSW17)) 1.2rem var(--light-text), calc(-4*var(--lSW17)) 1.2rem var(--light-text), calc(-5*var(--lSW17)) 1.2rem var(--light-text), calc(-6*var(--lSW17)) 1.2rem var(--light-text), calc(-7*var(--lSW17)) 1.2rem var(--light-text), calc(-8*var(--lSW17)) 1.2rem var(--light-text), calc(-9*var(--lSW17)) 1.2rem var(--light-text);
    }
    96% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 1.2rem var(--light-text), calc(-2*var(--lSW17)) 1.2rem var(--light-text), calc(-3*var(--lSW17)) 1.2rem var(--light-text), calc(-4*var(--lSW17)) 1.2rem var(--light-text), calc(-5*var(--lSW17)) 1.2rem var(--light-text), calc(-6*var(--lSW17)) 1.2rem var(--light-text), calc(-7*var(--lSW17)) 1.2rem var(--light-text), calc(-8*var(--lSW17)) 1.2rem var(--light-text), calc(-9*var(--lSW17)) 1.2rem var(--light-text);
    }
    100% {
        text-shadow: calc( 0*var(--lSW17)) 1.2rem var(--light-text), calc(-1*var(--lSW17)) 1.2rem var(--light-text), calc(-2*var(--lSW17)) 1.2rem var(--light-text), calc(-3*var(--lSW17)) 1.2rem var(--light-text), calc(-4*var(--lSW17)) 1.2rem var(--light-text), calc(-5*var(--lSW17)) 1.2rem var(--light-text), calc(-6*var(--lSW17)) 1.2rem var(--light-text), calc(-7*var(--lSW17)) 1.2rem var(--light-text), calc(-8*var(--lSW17)) 1.2rem var(--light-text), calc(-9*var(--lSW17)) 1.2rem var(--light-text);
    }
}
@keyframes lightLoaderStyle17 {
    0% {
        text-shadow: calc( 0*var(--lSW17)) -1.2rem var(--light-text), calc(-1*var(--lSW17)) -1.2rem var(--light-text), calc(-2*var(--lSW17)) -1.2rem var(--light-text), calc(-3*var(--lSW17)) -1.2rem var(--light-text), calc(-4*var(--lSW17)) -1.2rem var(--light-text), calc(-5*var(--lSW17)) -1.2rem var(--light-text), calc(-6*var(--lSW17)) -1.2rem var(--light-text), calc(-7*var(--lSW17)) -1.2rem var(--light-text), calc(-8*var(--lSW17)) -1.2rem var(--light-text), calc(-9*var(--lSW17)) -1.2rem var(--light-text);
    }
    4% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) -1.2rem var(--light-text), calc(-2*var(--lSW17)) -1.2rem var(--light-text), calc(-3*var(--lSW17)) -1.2rem var(--light-text), calc(-4*var(--lSW17)) -1.2rem var(--light-text), calc(-5*var(--lSW17)) -1.2rem var(--light-text), calc(-6*var(--lSW17)) -1.2rem var(--light-text), calc(-7*var(--lSW17)) -1.2rem var(--light-text), calc(-8*var(--lSW17)) -1.2rem var(--light-text), calc(-9*var(--lSW17)) -1.2rem var(--light-text);
    }
    8% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) -1.2rem var(--light-text), calc(-3*var(--lSW17)) -1.2rem var(--light-text), calc(-4*var(--lSW17)) -1.2rem var(--light-text), calc(-5*var(--lSW17)) -1.2rem var(--light-text), calc(-6*var(--lSW17)) -1.2rem var(--light-text), calc(-7*var(--lSW17)) -1.2rem var(--light-text), calc(-8*var(--lSW17)) -1.2rem var(--light-text), calc(-9*var(--lSW17)) -1.2rem var(--light-text);
    }
    12% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) -1.2rem var(--light-text), calc(-4*var(--lSW17)) -1.2rem var(--light-text), calc(-5*var(--lSW17)) -1.2rem var(--light-text), calc(-6*var(--lSW17)) -1.2rem var(--light-text), calc(-7*var(--lSW17)) -1.2rem var(--light-text), calc(-8*var(--lSW17)) -1.2rem var(--light-text), calc(-9*var(--lSW17)) -1.2rem var(--light-text);
    }
    16% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) -1.2rem var(--light-text), calc(-5*var(--lSW17)) -1.2rem var(--light-text), calc(-6*var(--lSW17)) -1.2rem var(--light-text), calc(-7*var(--lSW17)) -1.2rem var(--light-text), calc(-8*var(--lSW17)) -1.2rem var(--light-text), calc(-9*var(--lSW17)) -1.2rem var(--light-text);
    }
    20% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) 0 var(--light-text), calc(-5*var(--lSW17)) -1.2rem var(--light-text), calc(-6*var(--lSW17)) -1.2rem var(--light-text), calc(-7*var(--lSW17)) -1.2rem var(--light-text), calc(-8*var(--lSW17)) -1.2rem var(--light-text), calc(-9*var(--lSW17)) -1.2rem var(--light-text);
    }
    24% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) 0 var(--light-text), calc(-5*var(--lSW17)) 0 var(--light-text), calc(-6*var(--lSW17)) -1.2rem var(--light-text), calc(-7*var(--lSW17)) -1.2rem var(--light-text), calc(-8*var(--lSW17)) -1.2rem var(--light-text), calc(-9*var(--lSW17)) -1.2rem var(--light-text);
    }
    28% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) 0 var(--light-text), calc(-5*var(--lSW17)) 0 var(--light-text), calc(-6*var(--lSW17)) 0 var(--light-text), calc(-7*var(--lSW17)) -1.2rem var(--light-text), calc(-8*var(--lSW17)) -1.2rem var(--light-text), calc(-9*var(--lSW17)) -1.2rem var(--light-text);
    }
    32% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) 0 var(--light-text), calc(-5*var(--lSW17)) 0 var(--light-text), calc(-6*var(--lSW17)) 0 var(--light-text), calc(-7*var(--lSW17)) 0 var(--light-text), calc(-8*var(--lSW17)) -1.2rem var(--light-text), calc(-9*var(--lSW17)) -1.2rem var(--light-text);
    }
    36% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) 0 var(--light-text), calc(-5*var(--lSW17)) 0 var(--light-text), calc(-6*var(--lSW17)) 0 var(--light-text), calc(-7*var(--lSW17)) 0 var(--light-text), calc(-8*var(--lSW17)) 0 var(--light-text), calc(-9*var(--lSW17)) -1.2rem var(--light-text);
    }
    40%,
      60% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) 0 var(--light-text), calc(-5*var(--lSW17)) 0 var(--light-text), calc(-6*var(--lSW17)) 0 var(--light-text), calc(-7*var(--lSW17)) 0 var(--light-text), calc(-8*var(--lSW17)) 0 var(--light-text), calc(-9*var(--lSW17)) 0 var(--light-text);
    }
    64% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) 0 var(--light-text), calc(-5*var(--lSW17)) 0 var(--light-text), calc(-6*var(--lSW17)) 0 var(--light-text), calc(-7*var(--lSW17)) 0 var(--light-text), calc(-8*var(--lSW17)) 0 var(--light-text), calc(-9*var(--lSW17)) 1.2rem var(--light-text);
    }
    68% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) 0 var(--light-text), calc(-5*var(--lSW17)) 0 var(--light-text), calc(-6*var(--lSW17)) 0 var(--light-text), calc(-7*var(--lSW17)) 0 var(--light-text), calc(-8*var(--lSW17)) 1.2rem var(--light-text), calc(-9*var(--lSW17)) 1.2rem var(--light-text);
    }
    72% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) 0 var(--light-text), calc(-5*var(--lSW17)) 0 var(--light-text), calc(-6*var(--lSW17)) 0 var(--light-text), calc(-7*var(--lSW17)) 1.2rem var(--light-text), calc(-8*var(--lSW17)) 1.2rem var(--light-text), calc(-9*var(--lSW17)) 1.2rem var(--light-text);
    }
    76% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) 0 var(--light-text), calc(-5*var(--lSW17)) 0 var(--light-text), calc(-6*var(--lSW17)) 1.2rem var(--light-text), calc(-7*var(--lSW17)) 1.2rem var(--light-text), calc(-8*var(--lSW17)) 1.2rem var(--light-text), calc(-9*var(--lSW17)) 1.2rem var(--light-text);
    }
    80% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) 0 var(--light-text), calc(-5*var(--lSW17)) 1.2rem var(--light-text), calc(-6*var(--lSW17)) 1.2rem var(--light-text), calc(-7*var(--lSW17)) 1.2rem var(--light-text), calc(-8*var(--lSW17)) 1.2rem var(--light-text), calc(-9*var(--lSW17)) 1.2rem var(--light-text);
    }
    84% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 0 var(--light-text), calc(-4*var(--lSW17)) 1.2rem var(--light-text), calc(-5*var(--lSW17)) 1.2rem var(--light-text), calc(-6*var(--lSW17)) 1.2rem var(--light-text), calc(-7*var(--lSW17)) 1.2rem var(--light-text), calc(-8*var(--lSW17)) 1.2rem var(--light-text), calc(-9*var(--lSW17)) 1.2rem var(--light-text);
    }
    88% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 0 var(--light-text), calc(-3*var(--lSW17)) 1.2rem var(--light-text), calc(-4*var(--lSW17)) 1.2rem var(--light-text), calc(-5*var(--lSW17)) 1.2rem var(--light-text), calc(-6*var(--lSW17)) 1.2rem var(--light-text), calc(-7*var(--lSW17)) 1.2rem var(--light-text), calc(-8*var(--lSW17)) 1.2rem var(--light-text), calc(-9*var(--lSW17)) 1.2rem var(--light-text);
    }
    92% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 0 var(--light-text), calc(-2*var(--lSW17)) 1.2rem var(--light-text), calc(-3*var(--lSW17)) 1.2rem var(--light-text), calc(-4*var(--lSW17)) 1.2rem var(--light-text), calc(-5*var(--lSW17)) 1.2rem var(--light-text), calc(-6*var(--lSW17)) 1.2rem var(--light-text), calc(-7*var(--lSW17)) 1.2rem var(--light-text), calc(-8*var(--lSW17)) 1.2rem var(--light-text), calc(-9*var(--lSW17)) 1.2rem var(--light-text);
    }
    96% {
        text-shadow: calc( 0*var(--lSW17)) 0 var(--light-text), calc(-1*var(--lSW17)) 1.2rem var(--light-text), calc(-2*var(--lSW17)) 1.2rem var(--light-text), calc(-3*var(--lSW17)) 1.2rem var(--light-text), calc(-4*var(--lSW17)) 1.2rem var(--light-text), calc(-5*var(--lSW17)) 1.2rem var(--light-text), calc(-6*var(--lSW17)) 1.2rem var(--light-text), calc(-7*var(--lSW17)) 1.2rem var(--light-text), calc(-8*var(--lSW17)) 1.2rem var(--light-text), calc(-9*var(--lSW17)) 1.2rem var(--light-text);
    }
    100% {
        text-shadow: calc( 0*var(--lSW17)) 1.2rem var(--light-text), calc(-1*var(--lSW17)) 1.2rem var(--light-text), calc(-2*var(--lSW17)) 1.2rem var(--light-text), calc(-3*var(--lSW17)) 1.2rem var(--light-text), calc(-4*var(--lSW17)) 1.2rem var(--light-text), calc(-5*var(--lSW17)) 1.2rem var(--light-text), calc(-6*var(--lSW17)) 1.2rem var(--light-text), calc(-7*var(--lSW17)) 1.2rem var(--light-text), calc(-8*var(--lSW17)) 1.2rem var(--light-text), calc(-9*var(--lSW17)) 1.2rem var(--light-text);
    }
}

Style 18

<div class="loader-wrapper">
    <span class="loader style-18"></span>
</div>
:root {
    --light-base-background: #fff;
    --light-text: #535353;
}
.loader-wrapper {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    background-color: var(--light-base-background);
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
}
.loader-wrapper .loader {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}
.loader.style-18 {
    --lSW18:10ch;
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    line-height: 1.2rem;
    letter-spacing: calc(10*var(--lSW18));
    width: var(--lSW18);
    overflow: hidden;
    white-space: nowrap;
    color: transparent;
    -webkit-animation: lightLoaderStyle18 3s infinite;
        animation: lightLoaderStyle18 3s infinite;
}
.loader.style-18::before {
    content: "Loading...";
}
@-webkit-keyframes lightLoaderStyle18 {
    0% {
        text-shadow: calc(  9*var(--lSW18)) 0 var(--light-text), calc( -1*var(--lSW18)) 0 var(--light-text), calc(-11*var(--lSW18)) 0 var(--light-text), calc(-21*var(--lSW18)) 0 var(--light-text), calc(-31*var(--lSW18)) 0 var(--light-text), calc(-41*var(--lSW18)) 0 var(--light-text), calc(-51*var(--lSW18)) 0 var(--light-text), calc(-61*var(--lSW18)) 0 var(--light-text), calc(-71*var(--lSW18)) 0 var(--light-text), calc(-81*var(--lSW18)) 0 var(--light-text);
    }
    4% {
        text-shadow: calc(  0*var(--lSW18)) 0 var(--light-text), calc( -1*var(--lSW18)) 0 var(--light-text), calc(-11*var(--lSW18)) 0 var(--light-text), calc(-21*var(--lSW18)) 0 var(--light-text), calc(-31*var(--lSW18)) 0 var(--light-text), calc(-41*var(--lSW18)) 0 var(--light-text), calc(-51*var(--lSW18)) 0 var(--light-text), calc(-61*var(--lSW18)) 0 var(--light-text), calc(-71*var(--lSW18)) 0 var(--light-text), calc(-81*var(--lSW18)) 0 var(--light-text);
    }
    8% {
        text-shadow: calc(  0*var(--lSW18)) 0 var(--light-text), calc(-10*var(--lSW18)) 0 var(--light-text), calc(-11*var(--lSW18)) 0 var(--light-text), calc(-21*var(--lSW18)) 0 var(--light-text), calc(-31*var(--lSW18)) 0 var(--light-text), calc(-41*var(--lSW18)) 0 var(--light-text), calc(-51*var(--lSW18)) 0 var(--light-text), calc(-61*var(--lSW18)) 0 var(--light-text), calc(-71*var(--lSW18)) 0 var(--light-text), calc(-81*var(--lSW18)) 0 var(--light-text);
    }
    12% {
        text-shadow: calc(  0*var(--lSW18)) 0 var(--light-text), calc(-10*var(--lSW18)) 0 var(--light-text), calc(-20*var(--lSW18)) 0 var(--light-text), calc(-21*var(--lSW18)) 0 var(--light-text), calc(-31*var(--lSW18)) 0 var(--light-text), calc(-41*var(--lSW18)) 0 var(--light-text), calc(-51*var(--lSW18)) 0 var(--light-text), calc(-61*var(--lSW18)) 0 var(--light-text), calc(-71*var(--lSW18)) 0 var(--light-text), calc(-81*var(--lSW18)) 0 var(--light-text);
    }
    16% {
        text-shadow: calc(  0*var(--lSW18)) 0 var(--light-text), calc(-10*var(--lSW18)) 0 var(--light-text), calc(-20*var(--lSW18)) 0 var(--light-text), calc(-30*var(--lSW18)) 0 var(--light-text), calc(-31*var(--lSW18)) 0 var(--light-text), calc(-41*var(--lSW18)) 0 var(--light-text), calc(-51*var(--lSW18)) 0 var(--light-text), calc(-61*var(--lSW18)) 0 var(--light-text), calc(-71*var(--lSW18)) 0 var(--light-text), calc(-81*var(--lSW18)) 0 var(--light-text);
    }
    20% {
        text-shadow: calc(  0*var(--lSW18)) 0 var(--light-text), calc(-10*var(--lSW18)) 0 var(--light-text), calc(-20*var(--lSW18)) 0 var(--light-text), calc(-30*var(--lSW18)) 0 var(--light-text), calc(-40*var(--lSW18)) 0 var(--light-text), calc(-41*var(--lSW18)) 0 var(--light-text), calc(-51*var(--lSW18)) 0 var(--light-text), calc(-61*var(--lSW18)) 0 var(--light-text), calc(-71*var(--lSW18)) 0 var(--light-text), calc(-81*var(--lSW18)) 0 var(--light-text);
    }
    24% {
        text-shadow: calc(  0*var(--lSW18)) 0 var(--light-text), calc(-10*var(--lSW18)) 0 var(--light-text), calc(-20*var(--lSW18)) 0 var(--light-text), calc(-30*var(--lSW18)) 0 var(--light-text), calc(-40*var(--lSW18)) 0 var(--light-text), calc(-50*var(--lSW18)) 0 var(--light-text), calc(-51*var(--lSW18)) 0 var(--light-text), calc(-61*var(--lSW18)) 0 var(--light-text), calc(-71*var(--lSW18)) 0 var(--light-text), calc(-81*var(--lSW18)) 0 var(--light-text);
    }
    28% {
        text-shadow: calc(  0*var(--lSW18)) 0 var(--light-text), calc(-10*var(--lSW18)) 0 var(--light-text), calc(-20*var(--lSW18)) 0 var(--light-text), calc(-30*var(--lSW18)) 0 var(--light-text), calc(-40*var(--lSW18)) 0 var(--light-text), calc(-50*var(--lSW18)) 0 var(--light-text), calc(-60*var(--lSW18)) 0 var(--light-text), calc(-61*var(--lSW18)) 0 var(--light-text), calc(-71*var(--lSW18)) 0 var(--light-text), calc(-81*var(--lSW18)) 0 var(--light-text);
    }
    32% {
        text-shadow: calc(  0*var(--lSW18)) 0 var(--light-text), calc(-10*var(--lSW18)) 0 var(--light-text), calc(-20*var(--lSW18)) 0 var(--light-text), calc(-30*var(--lSW18)) 0 var(--light-text), calc(-40*var(--lSW18)) 0 var(--light-text), calc(-50*var(--lSW18)) 0 var(--light-text), calc(-60*var(--lSW18)) 0 var(--light-text), calc(-70*var(--lSW18)) 0 var(--light-text), calc(-71*var(--lSW18)) 0 var(--light-text), calc(-81*var(--lSW18)) 0 var(--light-text);
    }
    36% {
        text-shadow: calc(  0*var(--lSW18)) 0 var(--light-text), calc(-10*var(--lSW18)) 0 var(--light-text), calc(-20*var(--lSW18)) 0 var(--light-text), calc(-30*var(--lSW18)) 0 var(--light-text), calc(-40*var(--lSW18)) 0 var(--light-text), calc(-50*var(--lSW18)) 0 var(--light-text), calc(-60*var(--lSW18)) 0 var(--light-text), calc(-70*var(--lSW18)) 0 var(--light-text), calc(-80*var(--lSW18)) 0 var(--light-text), calc(-81*var(--lSW18)) 0 var(--light-text);
    }
    40%,
      60% {
        text-shadow: calc(  0*var(--lSW18)) 0 var(--light-text), calc(-10*var(--lSW18)) 0 var(--light-text), calc(-20*var(--lSW18)) 0 var(--light-text), calc(-30*var(--lSW18)) 0 var(--light-text), calc(-40*var(--lSW18)) 0 var(--light-text), calc(-50*var(--lSW18)) 0 var(--light-text), calc(-60*var(--lSW18)) 0 var(--light-text), calc(-70*var(--lSW18)) 0 var(--light-text), calc(-80*var(--lSW18)) 0 var(--light-text), calc(-90*var(--lSW18)) 0 var(--light-text);
    }
    64% {
        text-shadow: calc(-9*var(--lSW18)) 0 var(--light-text), calc(-10*var(--lSW18)) 0 var(--light-text), calc(-20*var(--lSW18)) 0 var(--light-text), calc(-30*var(--lSW18)) 0 var(--light-text), calc(-40*var(--lSW18)) 0 var(--light-text), calc(-50*var(--lSW18)) 0 var(--light-text), calc(-60*var(--lSW18)) 0 var(--light-text), calc(-70*var(--lSW18)) 0 var(--light-text), calc(-80*var(--lSW18)) 0 var(--light-text), calc(-90*var(--lSW18)) 0 var(--light-text);
    }
    68% {
        text-shadow: calc(-9*var(--lSW18)) 0 var(--light-text), calc(-19*var(--lSW18)) 0 var(--light-text), calc(-20*var(--lSW18)) 0 var(--light-text), calc(-30*var(--lSW18)) 0 var(--light-text), calc(-40*var(--lSW18)) 0 var(--light-text), calc(-50*var(--lSW18)) 0 var(--light-text), calc(-60*var(--lSW18)) 0 var(--light-text), calc(-70*var(--lSW18)) 0 var(--light-text), calc(-80*var(--lSW18)) 0 var(--light-text), calc(-90*var(--lSW18)) 0 var(--light-text);
    }
    72% {
        text-shadow: calc(-9*var(--lSW18)) 0 var(--light-text), calc(-19*var(--lSW18)) 0 var(--light-text), calc(-29*var(--lSW18)) 0 var(--light-text), calc(-30*var(--lSW18)) 0 var(--light-text), calc(-40*var(--lSW18)) 0 var(--light-text), calc(-50*var(--lSW18)) 0 var(--light-text), calc(-60*var(--lSW18)) 0 var(--light-text), calc(-70*var(--lSW18)) 0 var(--light-text), calc(-80*var(--lSW18)) 0 var(--light-text), calc(-90*var(--lSW18)) 0 var(--light-text);
    }
    76% {
        text-shadow: calc(-9*var(--lSW18)) 0 var(--light-text), calc(-19*var(--lSW18)) 0 var(--light-text), calc(-29*var(--lSW18)) 0 var(--light-text), calc(-39*var(--lSW18)) 0 var(--light-text), calc(-40*var(--lSW18)) 0 var(--light-text), calc(-50*var(--lSW18)) 0 var(--light-text), calc(-60*var(--lSW18)) 0 var(--light-text), calc(-70*var(--lSW18)) 0 var(--light-text), calc(-80*var(--lSW18)) 0 var(--light-text), calc(-90*var(--lSW18)) 0 var(--light-text);
    }
    80% {
        text-shadow: calc(-9*var(--lSW18)) 0 var(--light-text), calc(-19*var(--lSW18)) 0 var(--light-text), calc(-29*var(--lSW18)) 0 var(--light-text), calc(-39*var(--lSW18)) 0 var(--light-text), calc(-49*var(--lSW18)) 0 var(--light-text), calc(-50*var(--lSW18)) 0 var(--light-text), calc(-60*var(--lSW18)) 0 var(--light-text), calc(-70*var(--lSW18)) 0 var(--light-text), calc(-80*var(--lSW18)) 0 var(--light-text), calc(-90*var(--lSW18)) 0 var(--light-text);
    }
    84% {
        text-shadow: calc(-9*var(--lSW18)) 0 var(--light-text), calc(-19*var(--lSW18)) 0 var(--light-text), calc(-29*var(--lSW18)) 0 var(--light-text), calc(-39*var(--lSW18)) 0 var(--light-text), calc(-49*var(--lSW18)) 0 var(--light-text), calc(-59*var(--lSW18)) 0 var(--light-text), calc(-60*var(--lSW18)) 0 var(--light-text), calc(-70*var(--lSW18)) 0 var(--light-text), calc(-80*var(--lSW18)) 0 var(--light-text), calc(-90*var(--lSW18)) 0 var(--light-text);
    }
    88% {
        text-shadow: calc(-9*var(--lSW18)) 0 var(--light-text), calc(-19*var(--lSW18)) 0 var(--light-text), calc(-29*var(--lSW18)) 0 var(--light-text), calc(-39*var(--lSW18)) 0 var(--light-text), calc(-49*var(--lSW18)) 0 var(--light-text), calc(-59*var(--lSW18)) 0 var(--light-text), calc(-69*var(--lSW18)) 0 var(--light-text), calc(-70*var(--lSW18)) 0 var(--light-text), calc(-80*var(--lSW18)) 0 var(--light-text), calc(-90*var(--lSW18)) 0 var(--light-text);
    }
    92% {
        text-shadow: calc(-9*var(--lSW18)) 0 var(--light-text), calc(-19*var(--lSW18)) 0 var(--light-text), calc(-29*var(--lSW18)) 0 var(--light-text), calc(-39*var(--lSW18)) 0 var(--light-text), calc(-49*var(--lSW18)) 0 var(--light-text), calc(-59*var(--lSW18)) 0 var(--light-text), calc(-69*var(--lSW18)) 0 var(--light-text), calc(-79*var(--lSW18)) 0 var(--light-text), calc(-80*var(--lSW18)) 0 var(--light-text), calc(-90*var(--lSW18)) 0 var(--light-text);
    }
    96% {
        text-shadow: calc(-9*var(--lSW18)) 0 var(--light-text), calc(-19*var(--lSW18)) 0 var(--light-text), calc(-29*var(--lSW18)) 0 var(--light-text), calc(-39*var(--lSW18)) 0 var(--light-text), calc(-49*var(--lSW18)) 0 var(--light-text), calc(-59*var(--lSW18)) 0 var(--light-text), calc(-69*var(--lSW18)) 0 var(--light-text), calc(-79*var(--lSW18)) 0 var(--light-text), calc(-89*var(--lSW18)) 0 var(--light-text), calc(-90*var(--lSW18)) 0 var(--light-text);
    }
    100% {
        text-shadow: calc(-9*var(--lSW18)) 0 var(--light-text), calc(-19*var(--lSW18)) 0 var(--light-text), calc(-29*var(--lSW18)) 0 var(--light-text), calc(-39*var(--lSW18)) 0 var(--light-text), calc(-49*var(--lSW18)) 0 var(--light-text), calc(-59*var(--lSW18)) 0 var(--light-text), calc(-69*var(--lSW18)) 0 var(--light-text), calc(-79*var(--lSW18)) 0 var(--light-text), calc(-89*var(--lSW18)) 0 var(--light-text), calc(-99*var(--lSW18)) 0 var(--light-text);
    }
}
@keyframes lightLoaderStyle18 {
    0% {
        text-shadow: calc(  9*var(--lSW18)) 0 var(--light-text), calc( -1*var(--lSW18)) 0 var(--light-text), calc(-11*var(--lSW18)) 0 var(--light-text), calc(-21*var(--lSW18)) 0 var(--light-text), calc(-31*var(--lSW18)) 0 var(--light-text), calc(-41*var(--lSW18)) 0 var(--light-text), calc(-51*var(--lSW18)) 0 var(--light-text), calc(-61*var(--lSW18)) 0 var(--light-text), calc(-71*var(--lSW18)) 0 var(--light-text), calc(-81*var(--lSW18)) 0 var(--light-text);
    }
    4% {
        text-shadow: calc(  0*var(--lSW18)) 0 var(--light-text), calc( -1*var(--lSW18)) 0 var(--light-text), calc(-11*var(--lSW18)) 0 var(--light-text), calc(-21*var(--lSW18)) 0 var(--light-text), calc(-31*var(--lSW18)) 0 var(--light-text), calc(-41*var(--lSW18)) 0 var(--light-text), calc(-51*var(--lSW18)) 0 var(--light-text), calc(-61*var(--lSW18)) 0 var(--light-text), calc(-71*var(--lSW18)) 0 var(--light-text), calc(-81*var(--lSW18)) 0 var(--light-text);
    }
    8% {
        text-shadow: calc(  0*var(--lSW18)) 0 var(--light-text), calc(-10*var(--lSW18)) 0 var(--light-text), calc(-11*var(--lSW18)) 0 var(--light-text), calc(-21*var(--lSW18)) 0 var(--light-text), calc(-31*var(--lSW18)) 0 var(--light-text), calc(-41*var(--lSW18)) 0 var(--light-text), calc(-51*var(--lSW18)) 0 var(--light-text), calc(-61*var(--lSW18)) 0 var(--light-text), calc(-71*var(--lSW18)) 0 var(--light-text), calc(-81*var(--lSW18)) 0 var(--light-text);
    }
    12% {
        text-shadow: calc(  0*var(--lSW18)) 0 var(--light-text), calc(-10*var(--lSW18)) 0 var(--light-text), calc(-20*var(--lSW18)) 0 var(--light-text), calc(-21*var(--lSW18)) 0 var(--light-text), calc(-31*var(--lSW18)) 0 var(--light-text), calc(-41*var(--lSW18)) 0 var(--light-text), calc(-51*var(--lSW18)) 0 var(--light-text), calc(-61*var(--lSW18)) 0 var(--light-text), calc(-71*var(--lSW18)) 0 var(--light-text), calc(-81*var(--lSW18)) 0 var(--light-text);
    }
    16% {
        text-shadow: calc(  0*var(--lSW18)) 0 var(--light-text), calc(-10*var(--lSW18)) 0 var(--light-text), calc(-20*var(--lSW18)) 0 var(--light-text), calc(-30*var(--lSW18)) 0 var(--light-text), calc(-31*var(--lSW18)) 0 var(--light-text), calc(-41*var(--lSW18)) 0 var(--light-text), calc(-51*var(--lSW18)) 0 var(--light-text), calc(-61*var(--lSW18)) 0 var(--light-text), calc(-71*var(--lSW18)) 0 var(--light-text), calc(-81*var(--lSW18)) 0 var(--light-text);
    }
    20% {
        text-shadow: calc(  0*var(--lSW18)) 0 var(--light-text), calc(-10*var(--lSW18)) 0 var(--light-text), calc(-20*var(--lSW18)) 0 var(--light-text), calc(-30*var(--lSW18)) 0 var(--light-text), calc(-40*var(--lSW18)) 0 var(--light-text), calc(-41*var(--lSW18)) 0 var(--light-text), calc(-51*var(--lSW18)) 0 var(--light-text), calc(-61*var(--lSW18)) 0 var(--light-text), calc(-71*var(--lSW18)) 0 var(--light-text), calc(-81*var(--lSW18)) 0 var(--light-text);
    }
    24% {
        text-shadow: calc(  0*var(--lSW18)) 0 var(--light-text), calc(-10*var(--lSW18)) 0 var(--light-text), calc(-20*var(--lSW18)) 0 var(--light-text), calc(-30*var(--lSW18)) 0 var(--light-text), calc(-40*var(--lSW18)) 0 var(--light-text), calc(-50*var(--lSW18)) 0 var(--light-text), calc(-51*var(--lSW18)) 0 var(--light-text), calc(-61*var(--lSW18)) 0 var(--light-text), calc(-71*var(--lSW18)) 0 var(--light-text), calc(-81*var(--lSW18)) 0 var(--light-text);
    }
    28% {
        text-shadow: calc(  0*var(--lSW18)) 0 var(--light-text), calc(-10*var(--lSW18)) 0 var(--light-text), calc(-20*var(--lSW18)) 0 var(--light-text), calc(-30*var(--lSW18)) 0 var(--light-text), calc(-40*var(--lSW18)) 0 var(--light-text), calc(-50*var(--lSW18)) 0 var(--light-text), calc(-60*var(--lSW18)) 0 var(--light-text), calc(-61*var(--lSW18)) 0 var(--light-text), calc(-71*var(--lSW18)) 0 var(--light-text), calc(-81*var(--lSW18)) 0 var(--light-text);
    }
    32% {
        text-shadow: calc(  0*var(--lSW18)) 0 var(--light-text), calc(-10*var(--lSW18)) 0 var(--light-text), calc(-20*var(--lSW18)) 0 var(--light-text), calc(-30*var(--lSW18)) 0 var(--light-text), calc(-40*var(--lSW18)) 0 var(--light-text), calc(-50*var(--lSW18)) 0 var(--light-text), calc(-60*var(--lSW18)) 0 var(--light-text), calc(-70*var(--lSW18)) 0 var(--light-text), calc(-71*var(--lSW18)) 0 var(--light-text), calc(-81*var(--lSW18)) 0 var(--light-text);
    }
    36% {
        text-shadow: calc(  0*var(--lSW18)) 0 var(--light-text), calc(-10*var(--lSW18)) 0 var(--light-text), calc(-20*var(--lSW18)) 0 var(--light-text), calc(-30*var(--lSW18)) 0 var(--light-text), calc(-40*var(--lSW18)) 0 var(--light-text), calc(-50*var(--lSW18)) 0 var(--light-text), calc(-60*var(--lSW18)) 0 var(--light-text), calc(-70*var(--lSW18)) 0 var(--light-text), calc(-80*var(--lSW18)) 0 var(--light-text), calc(-81*var(--lSW18)) 0 var(--light-text);
    }
    40%,
      60% {
        text-shadow: calc(  0*var(--lSW18)) 0 var(--light-text), calc(-10*var(--lSW18)) 0 var(--light-text), calc(-20*var(--lSW18)) 0 var(--light-text), calc(-30*var(--lSW18)) 0 var(--light-text), calc(-40*var(--lSW18)) 0 var(--light-text), calc(-50*var(--lSW18)) 0 var(--light-text), calc(-60*var(--lSW18)) 0 var(--light-text), calc(-70*var(--lSW18)) 0 var(--light-text), calc(-80*var(--lSW18)) 0 var(--light-text), calc(-90*var(--lSW18)) 0 var(--light-text);
    }
    64% {
        text-shadow: calc(-9*var(--lSW18)) 0 var(--light-text), calc(-10*var(--lSW18)) 0 var(--light-text), calc(-20*var(--lSW18)) 0 var(--light-text), calc(-30*var(--lSW18)) 0 var(--light-text), calc(-40*var(--lSW18)) 0 var(--light-text), calc(-50*var(--lSW18)) 0 var(--light-text), calc(-60*var(--lSW18)) 0 var(--light-text), calc(-70*var(--lSW18)) 0 var(--light-text), calc(-80*var(--lSW18)) 0 var(--light-text), calc(-90*var(--lSW18)) 0 var(--light-text);
    }
    68% {
        text-shadow: calc(-9*var(--lSW18)) 0 var(--light-text), calc(-19*var(--lSW18)) 0 var(--light-text), calc(-20*var(--lSW18)) 0 var(--light-text), calc(-30*var(--lSW18)) 0 var(--light-text), calc(-40*var(--lSW18)) 0 var(--light-text), calc(-50*var(--lSW18)) 0 var(--light-text), calc(-60*var(--lSW18)) 0 var(--light-text), calc(-70*var(--lSW18)) 0 var(--light-text), calc(-80*var(--lSW18)) 0 var(--light-text), calc(-90*var(--lSW18)) 0 var(--light-text);
    }
    72% {
        text-shadow: calc(-9*var(--lSW18)) 0 var(--light-text), calc(-19*var(--lSW18)) 0 var(--light-text), calc(-29*var(--lSW18)) 0 var(--light-text), calc(-30*var(--lSW18)) 0 var(--light-text), calc(-40*var(--lSW18)) 0 var(--light-text), calc(-50*var(--lSW18)) 0 var(--light-text), calc(-60*var(--lSW18)) 0 var(--light-text), calc(-70*var(--lSW18)) 0 var(--light-text), calc(-80*var(--lSW18)) 0 var(--light-text), calc(-90*var(--lSW18)) 0 var(--light-text);
    }
    76% {
        text-shadow: calc(-9*var(--lSW18)) 0 var(--light-text), calc(-19*var(--lSW18)) 0 var(--light-text), calc(-29*var(--lSW18)) 0 var(--light-text), calc(-39*var(--lSW18)) 0 var(--light-text), calc(-40*var(--lSW18)) 0 var(--light-text), calc(-50*var(--lSW18)) 0 var(--light-text), calc(-60*var(--lSW18)) 0 var(--light-text), calc(-70*var(--lSW18)) 0 var(--light-text), calc(-80*var(--lSW18)) 0 var(--light-text), calc(-90*var(--lSW18)) 0 var(--light-text);
    }
    80% {
        text-shadow: calc(-9*var(--lSW18)) 0 var(--light-text), calc(-19*var(--lSW18)) 0 var(--light-text), calc(-29*var(--lSW18)) 0 var(--light-text), calc(-39*var(--lSW18)) 0 var(--light-text), calc(-49*var(--lSW18)) 0 var(--light-text), calc(-50*var(--lSW18)) 0 var(--light-text), calc(-60*var(--lSW18)) 0 var(--light-text), calc(-70*var(--lSW18)) 0 var(--light-text), calc(-80*var(--lSW18)) 0 var(--light-text), calc(-90*var(--lSW18)) 0 var(--light-text);
    }
    84% {
        text-shadow: calc(-9*var(--lSW18)) 0 var(--light-text), calc(-19*var(--lSW18)) 0 var(--light-text), calc(-29*var(--lSW18)) 0 var(--light-text), calc(-39*var(--lSW18)) 0 var(--light-text), calc(-49*var(--lSW18)) 0 var(--light-text), calc(-59*var(--lSW18)) 0 var(--light-text), calc(-60*var(--lSW18)) 0 var(--light-text), calc(-70*var(--lSW18)) 0 var(--light-text), calc(-80*var(--lSW18)) 0 var(--light-text), calc(-90*var(--lSW18)) 0 var(--light-text);
    }
    88% {
        text-shadow: calc(-9*var(--lSW18)) 0 var(--light-text), calc(-19*var(--lSW18)) 0 var(--light-text), calc(-29*var(--lSW18)) 0 var(--light-text), calc(-39*var(--lSW18)) 0 var(--light-text), calc(-49*var(--lSW18)) 0 var(--light-text), calc(-59*var(--lSW18)) 0 var(--light-text), calc(-69*var(--lSW18)) 0 var(--light-text), calc(-70*var(--lSW18)) 0 var(--light-text), calc(-80*var(--lSW18)) 0 var(--light-text), calc(-90*var(--lSW18)) 0 var(--light-text);
    }
    92% {
        text-shadow: calc(-9*var(--lSW18)) 0 var(--light-text), calc(-19*var(--lSW18)) 0 var(--light-text), calc(-29*var(--lSW18)) 0 var(--light-text), calc(-39*var(--lSW18)) 0 var(--light-text), calc(-49*var(--lSW18)) 0 var(--light-text), calc(-59*var(--lSW18)) 0 var(--light-text), calc(-69*var(--lSW18)) 0 var(--light-text), calc(-79*var(--lSW18)) 0 var(--light-text), calc(-80*var(--lSW18)) 0 var(--light-text), calc(-90*var(--lSW18)) 0 var(--light-text);
    }
    96% {
        text-shadow: calc(-9*var(--lSW18)) 0 var(--light-text), calc(-19*var(--lSW18)) 0 var(--light-text), calc(-29*var(--lSW18)) 0 var(--light-text), calc(-39*var(--lSW18)) 0 var(--light-text), calc(-49*var(--lSW18)) 0 var(--light-text), calc(-59*var(--lSW18)) 0 var(--light-text), calc(-69*var(--lSW18)) 0 var(--light-text), calc(-79*var(--lSW18)) 0 var(--light-text), calc(-89*var(--lSW18)) 0 var(--light-text), calc(-90*var(--lSW18)) 0 var(--light-text);
    }
    100% {
        text-shadow: calc(-9*var(--lSW18)) 0 var(--light-text), calc(-19*var(--lSW18)) 0 var(--light-text), calc(-29*var(--lSW18)) 0 var(--light-text), calc(-39*var(--lSW18)) 0 var(--light-text), calc(-49*var(--lSW18)) 0 var(--light-text), calc(-59*var(--lSW18)) 0 var(--light-text), calc(-69*var(--lSW18)) 0 var(--light-text), calc(-79*var(--lSW18)) 0 var(--light-text), calc(-89*var(--lSW18)) 0 var(--light-text), calc(-99*var(--lSW18)) 0 var(--light-text);
    }
}

Style 19

<div class="loader-wrapper">
    <span class="loader style-19"></span>
</div>
:root {
    --light-base-background: #fff;
    --light-text: #535353;
}
.loader-wrapper {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    background-color: var(--light-base-background);
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
}
.loader-wrapper .loader {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}
.loader.style-19 {
    --lSW19:10ch;
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    line-height: 1.2rem;
    letter-spacing: var(--lSW19);
    width: var(--lSW19);
    overflow: hidden;
    white-space: nowrap;
    color: transparent;
    -webkit-animation: lightLoaderStyle19 2s infinite linear;
        animation: lightLoaderStyle19 2s infinite linear;
}
.loader.style-19::before {
    content: "Loading...";
}
@-webkit-keyframes lightLoaderStyle19 {
    0% {
        text-shadow: calc( 0*var(--lSW19)) 0, calc(-1*var(--lSW19)) 0, calc(-2*var(--lSW19)) 0, calc(-3*var(--lSW19)) 0, calc(-4*var(--lSW19)) 0, calc(-5*var(--lSW19)) 0, calc(-6*var(--lSW19)) 0, calc(-7*var(--lSW19)) 0, calc(-8*var(--lSW19)) 0, calc(-9*var(--lSW19)) 0;
    }
    4% {
        text-shadow: calc( 0*var(--lSW19)) 0 var(--light-text), calc(-1*var(--lSW19)) 0, calc(-2*var(--lSW19)) 0, calc(-3*var(--lSW19)) 0, calc(-4*var(--lSW19)) 0, calc(-5*var(--lSW19)) 0, calc(-6*var(--lSW19)) 0, calc(-7*var(--lSW19)) 0, calc(-8*var(--lSW19)) 0, calc(-9*var(--lSW19)) 0;
    }
    8% {
        text-shadow: calc( 0*var(--lSW19)) 0 var(--light-text), calc(-1*var(--lSW19)) 0 var(--light-text), calc(-2*var(--lSW19)) 0, calc(-3*var(--lSW19)) 0, calc(-4*var(--lSW19)) 0, calc(-5*var(--lSW19)) 0, calc(-6*var(--lSW19)) 0, calc(-7*var(--lSW19)) 0, calc(-8*var(--lSW19)) 0, calc(-9*var(--lSW19)) 0;
    }
    12% {
        text-shadow: calc( 0*var(--lSW19)) 0 var(--light-text), calc(-1*var(--lSW19)) 0 var(--light-text), calc(-2*var(--lSW19)) 0 var(--light-text), calc(-3*var(--lSW19)) 0, calc(-4*var(--lSW19)) 0, calc(-5*var(--lSW19)) 0, calc(-6*var(--lSW19)) 0, calc(-7*var(--lSW19)) 0, calc(-8*var(--lSW19)) 0, calc(-9*var(--lSW19)) 0;
    }
    16% {
        text-shadow: calc( 0*var(--lSW19)) 0 var(--light-text), calc(-1*var(--lSW19)) 0 var(--light-text), calc(-2*var(--lSW19)) 0 var(--light-text), calc(-3*var(--lSW19)) 0 var(--light-text), calc(-4*var(--lSW19)) 0, calc(-5*var(--lSW19)) 0, calc(-6*var(--lSW19)) 0, calc(-7*var(--lSW19)) 0, calc(-8*var(--lSW19)) 0, calc(-9*var(--lSW19)) 0;
    }
    20% {
        text-shadow: calc( 0*var(--lSW19)) 0 var(--light-text), calc(-1*var(--lSW19)) 0 var(--light-text), calc(-2*var(--lSW19)) 0 var(--light-text), calc(-3*var(--lSW19)) 0 var(--light-text), calc(-4*var(--lSW19)) 0 var(--light-text), calc(-5*var(--lSW19)) 0, calc(-6*var(--lSW19)) 0, calc(-7*var(--lSW19)) 0, calc(-8*var(--lSW19)) 0, calc(-9*var(--lSW19)) 0;
    }
    24% {
        text-shadow: calc( 0*var(--lSW19)) 0 var(--light-text), calc(-1*var(--lSW19)) 0 var(--light-text), calc(-2*var(--lSW19)) 0 var(--light-text), calc(-3*var(--lSW19)) 0 var(--light-text), calc(-4*var(--lSW19)) 0 var(--light-text), calc(-5*var(--lSW19)) 0 var(--light-text), calc(-6*var(--lSW19)) 0, calc(-7*var(--lSW19)) 0, calc(-8*var(--lSW19)) 0, calc(-9*var(--lSW19)) 0;
    }
    28% {
        text-shadow: calc( 0*var(--lSW19)) 0 var(--light-text), calc(-1*var(--lSW19)) 0 var(--light-text), calc(-2*var(--lSW19)) 0 var(--light-text), calc(-3*var(--lSW19)) 0 var(--light-text), calc(-4*var(--lSW19)) 0 var(--light-text), calc(-5*var(--lSW19)) 0 var(--light-text), calc(-6*var(--lSW19)) 0 var(--light-text), calc(-7*var(--lSW19)) 0, calc(-8*var(--lSW19)) 0, calc(-9*var(--lSW19)) 0;
    }
    32% {
        text-shadow: calc( 0*var(--lSW19)) 0 var(--light-text), calc(-1*var(--lSW19)) 0 var(--light-text), calc(-2*var(--lSW19)) 0 var(--light-text), calc(-3*var(--lSW19)) 0 var(--light-text), calc(-4*var(--lSW19)) 0 var(--light-text), calc(-5*var(--lSW19)) 0 var(--light-text), calc(-6*var(--lSW19)) 0 var(--light-text), calc(-7*var(--lSW19)) 0 var(--light-text), calc(-8*var(--lSW19)) 0, calc(-9*var(--lSW19)) 0;
    }
    36% {
        text-shadow: calc( 0*var(--lSW19)) 0 var(--light-text), calc(-1*var(--lSW19)) 0 var(--light-text), calc(-2*var(--lSW19)) 0 var(--light-text), calc(-3*var(--lSW19)) 0 var(--light-text), calc(-4*var(--lSW19)) 0 var(--light-text), calc(-5*var(--lSW19)) 0 var(--light-text), calc(-6*var(--lSW19)) 0 var(--light-text), calc(-7*var(--lSW19)) 0 var(--light-text), calc(-8*var(--lSW19)) 0 var(--light-text), calc(-9*var(--lSW19)) 0;
    }
    40%,
      60% {
        text-shadow: calc( 0*var(--lSW19)) 0 var(--light-text), calc(-1*var(--lSW19)) 0 var(--light-text), calc(-2*var(--lSW19)) 0 var(--light-text), calc(-3*var(--lSW19)) 0 var(--light-text), calc(-4*var(--lSW19)) 0 var(--light-text), calc(-5*var(--lSW19)) 0 var(--light-text), calc(-6*var(--lSW19)) 0 var(--light-text), calc(-7*var(--lSW19)) 0 var(--light-text), calc(-8*var(--lSW19)) 0 var(--light-text), calc(-9*var(--lSW19)) 0 var(--light-text);
    }
    64% {
        text-shadow: calc( 0*var(--lSW19)) 0, calc(-1*var(--lSW19)) 0 var(--light-text), calc(-2*var(--lSW19)) 0 var(--light-text), calc(-3*var(--lSW19)) 0 var(--light-text), calc(-4*var(--lSW19)) 0 var(--light-text), calc(-5*var(--lSW19)) 0 var(--light-text), calc(-6*var(--lSW19)) 0 var(--light-text), calc(-7*var(--lSW19)) 0 var(--light-text), calc(-8*var(--lSW19)) 0 var(--light-text), calc(-9*var(--lSW19)) 0 var(--light-text);
    }
    68% {
        text-shadow: calc( 0*var(--lSW19)) 0, calc(-1*var(--lSW19)) 0, calc(-2*var(--lSW19)) 0 var(--light-text), calc(-3*var(--lSW19)) 0 var(--light-text), calc(-4*var(--lSW19)) 0 var(--light-text), calc(-5*var(--lSW19)) 0 var(--light-text), calc(-6*var(--lSW19)) 0 var(--light-text), calc(-7*var(--lSW19)) 0 var(--light-text), calc(-8*var(--lSW19)) 0 var(--light-text), calc(-9*var(--lSW19)) 0 var(--light-text);
    }
    72% {
        text-shadow: calc( 0*var(--lSW19)) 0, calc(-1*var(--lSW19)) 0, calc(-2*var(--lSW19)) 0, calc(-3*var(--lSW19)) 0 var(--light-text), calc(-4*var(--lSW19)) 0 var(--light-text), calc(-5*var(--lSW19)) 0 var(--light-text), calc(-6*var(--lSW19)) 0 var(--light-text), calc(-7*var(--lSW19)) 0 var(--light-text), calc(-8*var(--lSW19)) 0 var(--light-text), calc(-9*var(--lSW19)) 0 var(--light-text);
    }
    76% {
        text-shadow: calc( 0*var(--lSW19)) 0, calc(-1*var(--lSW19)) 0, calc(-2*var(--lSW19)) 0, calc(-3*var(--lSW19)) 0, calc(-4*var(--lSW19)) 0 var(--light-text), calc(-5*var(--lSW19)) 0 var(--light-text), calc(-6*var(--lSW19)) 0 var(--light-text), calc(-7*var(--lSW19)) 0 var(--light-text), calc(-8*var(--lSW19)) 0 var(--light-text), calc(-9*var(--lSW19)) 0 var(--light-text);
    }
    80% {
        text-shadow: calc( 0*var(--lSW19)) 0, calc(-1*var(--lSW19)) 0, calc(-2*var(--lSW19)) 0, calc(-3*var(--lSW19)) 0, calc(-4*var(--lSW19)) 0, calc(-5*var(--lSW19)) 0 var(--light-text), calc(-6*var(--lSW19)) 0 var(--light-text), calc(-7*var(--lSW19)) 0 var(--light-text), calc(-8*var(--lSW19)) 0 var(--light-text), calc(-9*var(--lSW19)) 0 var(--light-text);
    }
    84% {
        text-shadow: calc( 0*var(--lSW19)) 0, calc(-1*var(--lSW19)) 0, calc(-2*var(--lSW19)) 0, calc(-3*var(--lSW19)) 0, calc(-4*var(--lSW19)) 0, calc(-5*var(--lSW19)) 0, calc(-6*var(--lSW19)) 0 var(--light-text), calc(-7*var(--lSW19)) 0 var(--light-text), calc(-8*var(--lSW19)) 0 var(--light-text), calc(-9*var(--lSW19)) 0 var(--light-text);
    }
    88% {
        text-shadow: calc( 0*var(--lSW19)) 0, calc(-1*var(--lSW19)) 0, calc(-2*var(--lSW19)) 0, calc(-3*var(--lSW19)) 0, calc(-4*var(--lSW19)) 0, calc(-5*var(--lSW19)) 0, calc(-6*var(--lSW19)) 0, calc(-7*var(--lSW19)) 0 var(--light-text), calc(-8*var(--lSW19)) 0 var(--light-text), calc(-9*var(--lSW19)) 0 var(--light-text);
    }
    92% {
        text-shadow: calc( 0*var(--lSW19)) 0, calc(-1*var(--lSW19)) 0, calc(-2*var(--lSW19)) 0, calc(-3*var(--lSW19)) 0, calc(-4*var(--lSW19)) 0, calc(-5*var(--lSW19)) 0, calc(-6*var(--lSW19)) 0, calc(-7*var(--lSW19)) 0, calc(-8*var(--lSW19)) 0 var(--light-text), calc(-9*var(--lSW19)) 0 var(--light-text);
    }
    96% {
        text-shadow: calc( 0*var(--lSW19)) 0, calc(-1*var(--lSW19)) 0, calc(-2*var(--lSW19)) 0, calc(-3*var(--lSW19)) 0, calc(-4*var(--lSW19)) 0, calc(-5*var(--lSW19)) 0, calc(-6*var(--lSW19)) 0, calc(-7*var(--lSW19)) 0, calc(-8*var(--lSW19)) 0, calc(-9*var(--lSW19)) 0 var(--light-text);
    }
    100% {
        text-shadow: calc( 0*var(--lSW19)) 0, calc(-1*var(--lSW19)) 0, calc(-2*var(--lSW19)) 0, calc(-3*var(--lSW19)) 0, calc(-4*var(--lSW19)) 0, calc(-5*var(--lSW19)) 0, calc(-6*var(--lSW19)) 0, calc(-7*var(--lSW19)) 0, calc(-8*var(--lSW19)) 0, calc(-9*var(--lSW19)) 0;
    }
}
@keyframes lightLoaderStyle19 {
    0% {
        text-shadow: calc( 0*var(--lSW19)) 0, calc(-1*var(--lSW19)) 0, calc(-2*var(--lSW19)) 0, calc(-3*var(--lSW19)) 0, calc(-4*var(--lSW19)) 0, calc(-5*var(--lSW19)) 0, calc(-6*var(--lSW19)) 0, calc(-7*var(--lSW19)) 0, calc(-8*var(--lSW19)) 0, calc(-9*var(--lSW19)) 0;
    }
    4% {
        text-shadow: calc( 0*var(--lSW19)) 0 var(--light-text), calc(-1*var(--lSW19)) 0, calc(-2*var(--lSW19)) 0, calc(-3*var(--lSW19)) 0, calc(-4*var(--lSW19)) 0, calc(-5*var(--lSW19)) 0, calc(-6*var(--lSW19)) 0, calc(-7*var(--lSW19)) 0, calc(-8*var(--lSW19)) 0, calc(-9*var(--lSW19)) 0;
    }
    8% {
        text-shadow: calc( 0*var(--lSW19)) 0 var(--light-text), calc(-1*var(--lSW19)) 0 var(--light-text), calc(-2*var(--lSW19)) 0, calc(-3*var(--lSW19)) 0, calc(-4*var(--lSW19)) 0, calc(-5*var(--lSW19)) 0, calc(-6*var(--lSW19)) 0, calc(-7*var(--lSW19)) 0, calc(-8*var(--lSW19)) 0, calc(-9*var(--lSW19)) 0;
    }
    12% {
        text-shadow: calc( 0*var(--lSW19)) 0 var(--light-text), calc(-1*var(--lSW19)) 0 var(--light-text), calc(-2*var(--lSW19)) 0 var(--light-text), calc(-3*var(--lSW19)) 0, calc(-4*var(--lSW19)) 0, calc(-5*var(--lSW19)) 0, calc(-6*var(--lSW19)) 0, calc(-7*var(--lSW19)) 0, calc(-8*var(--lSW19)) 0, calc(-9*var(--lSW19)) 0;
    }
    16% {
        text-shadow: calc( 0*var(--lSW19)) 0 var(--light-text), calc(-1*var(--lSW19)) 0 var(--light-text), calc(-2*var(--lSW19)) 0 var(--light-text), calc(-3*var(--lSW19)) 0 var(--light-text), calc(-4*var(--lSW19)) 0, calc(-5*var(--lSW19)) 0, calc(-6*var(--lSW19)) 0, calc(-7*var(--lSW19)) 0, calc(-8*var(--lSW19)) 0, calc(-9*var(--lSW19)) 0;
    }
    20% {
        text-shadow: calc( 0*var(--lSW19)) 0 var(--light-text), calc(-1*var(--lSW19)) 0 var(--light-text), calc(-2*var(--lSW19)) 0 var(--light-text), calc(-3*var(--lSW19)) 0 var(--light-text), calc(-4*var(--lSW19)) 0 var(--light-text), calc(-5*var(--lSW19)) 0, calc(-6*var(--lSW19)) 0, calc(-7*var(--lSW19)) 0, calc(-8*var(--lSW19)) 0, calc(-9*var(--lSW19)) 0;
    }
    24% {
        text-shadow: calc( 0*var(--lSW19)) 0 var(--light-text), calc(-1*var(--lSW19)) 0 var(--light-text), calc(-2*var(--lSW19)) 0 var(--light-text), calc(-3*var(--lSW19)) 0 var(--light-text), calc(-4*var(--lSW19)) 0 var(--light-text), calc(-5*var(--lSW19)) 0 var(--light-text), calc(-6*var(--lSW19)) 0, calc(-7*var(--lSW19)) 0, calc(-8*var(--lSW19)) 0, calc(-9*var(--lSW19)) 0;
    }
    28% {
        text-shadow: calc( 0*var(--lSW19)) 0 var(--light-text), calc(-1*var(--lSW19)) 0 var(--light-text), calc(-2*var(--lSW19)) 0 var(--light-text), calc(-3*var(--lSW19)) 0 var(--light-text), calc(-4*var(--lSW19)) 0 var(--light-text), calc(-5*var(--lSW19)) 0 var(--light-text), calc(-6*var(--lSW19)) 0 var(--light-text), calc(-7*var(--lSW19)) 0, calc(-8*var(--lSW19)) 0, calc(-9*var(--lSW19)) 0;
    }
    32% {
        text-shadow: calc( 0*var(--lSW19)) 0 var(--light-text), calc(-1*var(--lSW19)) 0 var(--light-text), calc(-2*var(--lSW19)) 0 var(--light-text), calc(-3*var(--lSW19)) 0 var(--light-text), calc(-4*var(--lSW19)) 0 var(--light-text), calc(-5*var(--lSW19)) 0 var(--light-text), calc(-6*var(--lSW19)) 0 var(--light-text), calc(-7*var(--lSW19)) 0 var(--light-text), calc(-8*var(--lSW19)) 0, calc(-9*var(--lSW19)) 0;
    }
    36% {
        text-shadow: calc( 0*var(--lSW19)) 0 var(--light-text), calc(-1*var(--lSW19)) 0 var(--light-text), calc(-2*var(--lSW19)) 0 var(--light-text), calc(-3*var(--lSW19)) 0 var(--light-text), calc(-4*var(--lSW19)) 0 var(--light-text), calc(-5*var(--lSW19)) 0 var(--light-text), calc(-6*var(--lSW19)) 0 var(--light-text), calc(-7*var(--lSW19)) 0 var(--light-text), calc(-8*var(--lSW19)) 0 var(--light-text), calc(-9*var(--lSW19)) 0;
    }
    40%,
      60% {
        text-shadow: calc( 0*var(--lSW19)) 0 var(--light-text), calc(-1*var(--lSW19)) 0 var(--light-text), calc(-2*var(--lSW19)) 0 var(--light-text), calc(-3*var(--lSW19)) 0 var(--light-text), calc(-4*var(--lSW19)) 0 var(--light-text), calc(-5*var(--lSW19)) 0 var(--light-text), calc(-6*var(--lSW19)) 0 var(--light-text), calc(-7*var(--lSW19)) 0 var(--light-text), calc(-8*var(--lSW19)) 0 var(--light-text), calc(-9*var(--lSW19)) 0 var(--light-text);
    }
    64% {
        text-shadow: calc( 0*var(--lSW19)) 0, calc(-1*var(--lSW19)) 0 var(--light-text), calc(-2*var(--lSW19)) 0 var(--light-text), calc(-3*var(--lSW19)) 0 var(--light-text), calc(-4*var(--lSW19)) 0 var(--light-text), calc(-5*var(--lSW19)) 0 var(--light-text), calc(-6*var(--lSW19)) 0 var(--light-text), calc(-7*var(--lSW19)) 0 var(--light-text), calc(-8*var(--lSW19)) 0 var(--light-text), calc(-9*var(--lSW19)) 0 var(--light-text);
    }
    68% {
        text-shadow: calc( 0*var(--lSW19)) 0, calc(-1*var(--lSW19)) 0, calc(-2*var(--lSW19)) 0 var(--light-text), calc(-3*var(--lSW19)) 0 var(--light-text), calc(-4*var(--lSW19)) 0 var(--light-text), calc(-5*var(--lSW19)) 0 var(--light-text), calc(-6*var(--lSW19)) 0 var(--light-text), calc(-7*var(--lSW19)) 0 var(--light-text), calc(-8*var(--lSW19)) 0 var(--light-text), calc(-9*var(--lSW19)) 0 var(--light-text);
    }
    72% {
        text-shadow: calc( 0*var(--lSW19)) 0, calc(-1*var(--lSW19)) 0, calc(-2*var(--lSW19)) 0, calc(-3*var(--lSW19)) 0 var(--light-text), calc(-4*var(--lSW19)) 0 var(--light-text), calc(-5*var(--lSW19)) 0 var(--light-text), calc(-6*var(--lSW19)) 0 var(--light-text), calc(-7*var(--lSW19)) 0 var(--light-text), calc(-8*var(--lSW19)) 0 var(--light-text), calc(-9*var(--lSW19)) 0 var(--light-text);
    }
    76% {
        text-shadow: calc( 0*var(--lSW19)) 0, calc(-1*var(--lSW19)) 0, calc(-2*var(--lSW19)) 0, calc(-3*var(--lSW19)) 0, calc(-4*var(--lSW19)) 0 var(--light-text), calc(-5*var(--lSW19)) 0 var(--light-text), calc(-6*var(--lSW19)) 0 var(--light-text), calc(-7*var(--lSW19)) 0 var(--light-text), calc(-8*var(--lSW19)) 0 var(--light-text), calc(-9*var(--lSW19)) 0 var(--light-text);
    }
    80% {
        text-shadow: calc( 0*var(--lSW19)) 0, calc(-1*var(--lSW19)) 0, calc(-2*var(--lSW19)) 0, calc(-3*var(--lSW19)) 0, calc(-4*var(--lSW19)) 0, calc(-5*var(--lSW19)) 0 var(--light-text), calc(-6*var(--lSW19)) 0 var(--light-text), calc(-7*var(--lSW19)) 0 var(--light-text), calc(-8*var(--lSW19)) 0 var(--light-text), calc(-9*var(--lSW19)) 0 var(--light-text);
    }
    84% {
        text-shadow: calc( 0*var(--lSW19)) 0, calc(-1*var(--lSW19)) 0, calc(-2*var(--lSW19)) 0, calc(-3*var(--lSW19)) 0, calc(-4*var(--lSW19)) 0, calc(-5*var(--lSW19)) 0, calc(-6*var(--lSW19)) 0 var(--light-text), calc(-7*var(--lSW19)) 0 var(--light-text), calc(-8*var(--lSW19)) 0 var(--light-text), calc(-9*var(--lSW19)) 0 var(--light-text);
    }
    88% {
        text-shadow: calc( 0*var(--lSW19)) 0, calc(-1*var(--lSW19)) 0, calc(-2*var(--lSW19)) 0, calc(-3*var(--lSW19)) 0, calc(-4*var(--lSW19)) 0, calc(-5*var(--lSW19)) 0, calc(-6*var(--lSW19)) 0, calc(-7*var(--lSW19)) 0 var(--light-text), calc(-8*var(--lSW19)) 0 var(--light-text), calc(-9*var(--lSW19)) 0 var(--light-text);
    }
    92% {
        text-shadow: calc( 0*var(--lSW19)) 0, calc(-1*var(--lSW19)) 0, calc(-2*var(--lSW19)) 0, calc(-3*var(--lSW19)) 0, calc(-4*var(--lSW19)) 0, calc(-5*var(--lSW19)) 0, calc(-6*var(--lSW19)) 0, calc(-7*var(--lSW19)) 0, calc(-8*var(--lSW19)) 0 var(--light-text), calc(-9*var(--lSW19)) 0 var(--light-text);
    }
    96% {
        text-shadow: calc( 0*var(--lSW19)) 0, calc(-1*var(--lSW19)) 0, calc(-2*var(--lSW19)) 0, calc(-3*var(--lSW19)) 0, calc(-4*var(--lSW19)) 0, calc(-5*var(--lSW19)) 0, calc(-6*var(--lSW19)) 0, calc(-7*var(--lSW19)) 0, calc(-8*var(--lSW19)) 0, calc(-9*var(--lSW19)) 0 var(--light-text);
    }
    100% {
        text-shadow: calc( 0*var(--lSW19)) 0, calc(-1*var(--lSW19)) 0, calc(-2*var(--lSW19)) 0, calc(-3*var(--lSW19)) 0, calc(-4*var(--lSW19)) 0, calc(-5*var(--lSW19)) 0, calc(-6*var(--lSW19)) 0, calc(-7*var(--lSW19)) 0, calc(-8*var(--lSW19)) 0, calc(-9*var(--lSW19)) 0;
    }
}

Style 20

<div class="loader-wrapper">
    <span class="loader style-20"></span>
</div>
:root {
    --light-base-background: #fff;
    --light-text: #535353;
}
.loader-wrapper {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    background-color: var(--light-base-background);
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
}
.loader-wrapper .loader {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}
.loader.style-20 {
    --lSW20:10ch;
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    line-height: 1.2rem;
    letter-spacing: var(--lSW20);
    width: var(--lSW20);
    overflow: hidden;
    white-space: nowrap;
    color: transparent;
    text-shadow: calc( 0*var(--lSW20)) 0 var(--light-text), calc(-1*var(--lSW20)) 0 var(--light-text), calc(-2*var(--lSW20)) 0 var(--light-text), calc(-3*var(--lSW20)) 0 var(--light-text), calc(-4*var(--lSW20)) 0 var(--light-text), calc(-5*var(--lSW20)) 0 var(--light-text), calc(-6*var(--lSW20)) 0 var(--light-text), calc(-7*var(--lSW20)) 0 var(--light-text), calc(-8*var(--lSW20)) 0 var(--light-text), calc(-9*var(--lSW20)) 0 var(--light-text);
    -webkit-animation: lightLoaderStyle20 2s infinite linear;
        animation: lightLoaderStyle20 2s infinite linear;
}
.loader.style-20::before {
    content: "Loading...";
}
@-webkit-keyframes lightLoaderStyle20 {
    9.09% {
        text-shadow: calc( 0*var(--lSW20)) -10px var(--light-text), calc(-1*var(--lSW20)) 0 var(--light-text), calc(-2*var(--lSW20)) 0 var(--light-text), calc(-3*var(--lSW20)) 0 var(--light-text), calc(-4*var(--lSW20)) 0 var(--light-text), calc(-5*var(--lSW20)) 0 var(--light-text), calc(-6*var(--lSW20)) 0 var(--light-text), calc(-7*var(--lSW20)) 0 var(--light-text), calc(-8*var(--lSW20)) 0 var(--light-text), calc(-9*var(--lSW20)) 0 var(--light-text);
    }
    18.18% {
        text-shadow: calc( 0*var(--lSW20)) 0 var(--light-text), calc(-1*var(--lSW20)) -10px var(--light-text), calc(-2*var(--lSW20)) 0 var(--light-text), calc(-3*var(--lSW20)) 0 var(--light-text), calc(-4*var(--lSW20)) 0 var(--light-text), calc(-5*var(--lSW20)) 0 var(--light-text), calc(-6*var(--lSW20)) 0 var(--light-text), calc(-7*var(--lSW20)) 0 var(--light-text), calc(-8*var(--lSW20)) 0 var(--light-text), calc(-9*var(--lSW20)) 0 var(--light-text);
    }
    27.27% {
        text-shadow: calc( 0*var(--lSW20)) 0 var(--light-text), calc(-1*var(--lSW20)) 0 var(--light-text), calc(-2*var(--lSW20)) -10px var(--light-text), calc(-3*var(--lSW20)) 0 var(--light-text), calc(-4*var(--lSW20)) 0 var(--light-text), calc(-5*var(--lSW20)) 0 var(--light-text), calc(-6*var(--lSW20)) 0 var(--light-text), calc(-7*var(--lSW20)) 0 var(--light-text), calc(-8*var(--lSW20)) 0 var(--light-text), calc(-9*var(--lSW20)) 0 var(--light-text);
    }
    36.36% {
        text-shadow: calc( 0*var(--lSW20)) 0 var(--light-text), calc(-1*var(--lSW20)) 0 var(--light-text), calc(-2*var(--lSW20)) 0 var(--light-text), calc(-3*var(--lSW20)) -10px var(--light-text), calc(-4*var(--lSW20)) 0 var(--light-text), calc(-5*var(--lSW20)) 0 var(--light-text), calc(-6*var(--lSW20)) 0 var(--light-text), calc(-7*var(--lSW20)) 0 var(--light-text), calc(-8*var(--lSW20)) 0 var(--light-text), calc(-9*var(--lSW20)) 0 var(--light-text);
    }
    45.45% {
        text-shadow: calc( 0*var(--lSW20)) 0 var(--light-text), calc(-1*var(--lSW20)) 0 var(--light-text), calc(-2*var(--lSW20)) 0 var(--light-text), calc(-3*var(--lSW20)) 0 var(--light-text), calc(-4*var(--lSW20)) -10px var(--light-text), calc(-5*var(--lSW20)) 0 var(--light-text), calc(-6*var(--lSW20)) 0 var(--light-text), calc(-7*var(--lSW20)) 0 var(--light-text), calc(-8*var(--lSW20)) 0 var(--light-text), calc(-9*var(--lSW20)) 0 var(--light-text);
    }
    54.54% {
        text-shadow: calc( 0*var(--lSW20)) 0 var(--light-text), calc(-1*var(--lSW20)) 0 var(--light-text), calc(-2*var(--lSW20)) 0 var(--light-text), calc(-3*var(--lSW20)) 0 var(--light-text), calc(-4*var(--lSW20)) 0 var(--light-text), calc(-5*var(--lSW20)) -10px var(--light-text), calc(-6*var(--lSW20)) 0 var(--light-text), calc(-7*var(--lSW20)) 0 var(--light-text), calc(-8*var(--lSW20)) 0 var(--light-text), calc(-9*var(--lSW20)) 0 var(--light-text);
    }
    63.63% {
        text-shadow: calc( 0*var(--lSW20)) 0 var(--light-text), calc(-1*var(--lSW20)) 0 var(--light-text), calc(-2*var(--lSW20)) 0 var(--light-text), calc(-3*var(--lSW20)) 0 var(--light-text), calc(-4*var(--lSW20)) 0 var(--light-text), calc(-5*var(--lSW20)) 0 var(--light-text), calc(-6*var(--lSW20)) -10px var(--light-text), calc(-7*var(--lSW20)) 0 var(--light-text), calc(-8*var(--lSW20)) 0 var(--light-text), calc(-9*var(--lSW20)) 0 var(--light-text);
    }
    72.72% {
        text-shadow: calc( 0*var(--lSW20)) 0 var(--light-text), calc(-1*var(--lSW20)) 0 var(--light-text), calc(-2*var(--lSW20)) 0 var(--light-text), calc(-3*var(--lSW20)) 0 var(--light-text), calc(-4*var(--lSW20)) 0 var(--light-text), calc(-5*var(--lSW20)) 0 var(--light-text), calc(-6*var(--lSW20)) 0 var(--light-text), calc(-7*var(--lSW20)) -10px var(--light-text), calc(-8*var(--lSW20)) 0 var(--light-text), calc(-9*var(--lSW20)) 0 var(--light-text);
    }
    81.81% {
        text-shadow: calc( 0*var(--lSW20)) 0 var(--light-text), calc(-1*var(--lSW20)) 0 var(--light-text), calc(-2*var(--lSW20)) 0 var(--light-text), calc(-3*var(--lSW20)) 0 var(--light-text), calc(-4*var(--lSW20)) 0 var(--light-text), calc(-5*var(--lSW20)) 0 var(--light-text), calc(-6*var(--lSW20)) 0 var(--light-text), calc(-7*var(--lSW20)) 0 var(--light-text), calc(-8*var(--lSW20)) -10px var(--light-text), calc(-9*var(--lSW20)) 0 var(--light-text);
    }
    90.90% {
        text-shadow: calc( 0*var(--lSW20)) 0 var(--light-text), calc(-1*var(--lSW20)) 0 var(--light-text), calc(-2*var(--lSW20)) 0 var(--light-text), calc(-3*var(--lSW20)) 0 var(--light-text), calc(-4*var(--lSW20)) 0 var(--light-text), calc(-5*var(--lSW20)) 0 var(--light-text), calc(-6*var(--lSW20)) 0 var(--light-text), calc(-7*var(--lSW20)) 0 var(--light-text), calc(-8*var(--lSW20)) 0 var(--light-text), calc(-9*var(--lSW20)) -10px var(--light-text);
    }
}
@keyframes lightLoaderStyle20 {
    9.09% {
        text-shadow: calc( 0*var(--lSW20)) -10px var(--light-text), calc(-1*var(--lSW20)) 0 var(--light-text), calc(-2*var(--lSW20)) 0 var(--light-text), calc(-3*var(--lSW20)) 0 var(--light-text), calc(-4*var(--lSW20)) 0 var(--light-text), calc(-5*var(--lSW20)) 0 var(--light-text), calc(-6*var(--lSW20)) 0 var(--light-text), calc(-7*var(--lSW20)) 0 var(--light-text), calc(-8*var(--lSW20)) 0 var(--light-text), calc(-9*var(--lSW20)) 0 var(--light-text);
    }
    18.18% {
        text-shadow: calc( 0*var(--lSW20)) 0 var(--light-text), calc(-1*var(--lSW20)) -10px var(--light-text), calc(-2*var(--lSW20)) 0 var(--light-text), calc(-3*var(--lSW20)) 0 var(--light-text), calc(-4*var(--lSW20)) 0 var(--light-text), calc(-5*var(--lSW20)) 0 var(--light-text), calc(-6*var(--lSW20)) 0 var(--light-text), calc(-7*var(--lSW20)) 0 var(--light-text), calc(-8*var(--lSW20)) 0 var(--light-text), calc(-9*var(--lSW20)) 0 var(--light-text);
    }
    27.27% {
        text-shadow: calc( 0*var(--lSW20)) 0 var(--light-text), calc(-1*var(--lSW20)) 0 var(--light-text), calc(-2*var(--lSW20)) -10px var(--light-text), calc(-3*var(--lSW20)) 0 var(--light-text), calc(-4*var(--lSW20)) 0 var(--light-text), calc(-5*var(--lSW20)) 0 var(--light-text), calc(-6*var(--lSW20)) 0 var(--light-text), calc(-7*var(--lSW20)) 0 var(--light-text), calc(-8*var(--lSW20)) 0 var(--light-text), calc(-9*var(--lSW20)) 0 var(--light-text);
    }
    36.36% {
        text-shadow: calc( 0*var(--lSW20)) 0 var(--light-text), calc(-1*var(--lSW20)) 0 var(--light-text), calc(-2*var(--lSW20)) 0 var(--light-text), calc(-3*var(--lSW20)) -10px var(--light-text), calc(-4*var(--lSW20)) 0 var(--light-text), calc(-5*var(--lSW20)) 0 var(--light-text), calc(-6*var(--lSW20)) 0 var(--light-text), calc(-7*var(--lSW20)) 0 var(--light-text), calc(-8*var(--lSW20)) 0 var(--light-text), calc(-9*var(--lSW20)) 0 var(--light-text);
    }
    45.45% {
        text-shadow: calc( 0*var(--lSW20)) 0 var(--light-text), calc(-1*var(--lSW20)) 0 var(--light-text), calc(-2*var(--lSW20)) 0 var(--light-text), calc(-3*var(--lSW20)) 0 var(--light-text), calc(-4*var(--lSW20)) -10px var(--light-text), calc(-5*var(--lSW20)) 0 var(--light-text), calc(-6*var(--lSW20)) 0 var(--light-text), calc(-7*var(--lSW20)) 0 var(--light-text), calc(-8*var(--lSW20)) 0 var(--light-text), calc(-9*var(--lSW20)) 0 var(--light-text);
    }
    54.54% {
        text-shadow: calc( 0*var(--lSW20)) 0 var(--light-text), calc(-1*var(--lSW20)) 0 var(--light-text), calc(-2*var(--lSW20)) 0 var(--light-text), calc(-3*var(--lSW20)) 0 var(--light-text), calc(-4*var(--lSW20)) 0 var(--light-text), calc(-5*var(--lSW20)) -10px var(--light-text), calc(-6*var(--lSW20)) 0 var(--light-text), calc(-7*var(--lSW20)) 0 var(--light-text), calc(-8*var(--lSW20)) 0 var(--light-text), calc(-9*var(--lSW20)) 0 var(--light-text);
    }
    63.63% {
        text-shadow: calc( 0*var(--lSW20)) 0 var(--light-text), calc(-1*var(--lSW20)) 0 var(--light-text), calc(-2*var(--lSW20)) 0 var(--light-text), calc(-3*var(--lSW20)) 0 var(--light-text), calc(-4*var(--lSW20)) 0 var(--light-text), calc(-5*var(--lSW20)) 0 var(--light-text), calc(-6*var(--lSW20)) -10px var(--light-text), calc(-7*var(--lSW20)) 0 var(--light-text), calc(-8*var(--lSW20)) 0 var(--light-text), calc(-9*var(--lSW20)) 0 var(--light-text);
    }
    72.72% {
        text-shadow: calc( 0*var(--lSW20)) 0 var(--light-text), calc(-1*var(--lSW20)) 0 var(--light-text), calc(-2*var(--lSW20)) 0 var(--light-text), calc(-3*var(--lSW20)) 0 var(--light-text), calc(-4*var(--lSW20)) 0 var(--light-text), calc(-5*var(--lSW20)) 0 var(--light-text), calc(-6*var(--lSW20)) 0 var(--light-text), calc(-7*var(--lSW20)) -10px var(--light-text), calc(-8*var(--lSW20)) 0 var(--light-text), calc(-9*var(--lSW20)) 0 var(--light-text);
    }
    81.81% {
        text-shadow: calc( 0*var(--lSW20)) 0 var(--light-text), calc(-1*var(--lSW20)) 0 var(--light-text), calc(-2*var(--lSW20)) 0 var(--light-text), calc(-3*var(--lSW20)) 0 var(--light-text), calc(-4*var(--lSW20)) 0 var(--light-text), calc(-5*var(--lSW20)) 0 var(--light-text), calc(-6*var(--lSW20)) 0 var(--light-text), calc(-7*var(--lSW20)) 0 var(--light-text), calc(-8*var(--lSW20)) -10px var(--light-text), calc(-9*var(--lSW20)) 0 var(--light-text);
    }
    90.90% {
        text-shadow: calc( 0*var(--lSW20)) 0 var(--light-text), calc(-1*var(--lSW20)) 0 var(--light-text), calc(-2*var(--lSW20)) 0 var(--light-text), calc(-3*var(--lSW20)) 0 var(--light-text), calc(-4*var(--lSW20)) 0 var(--light-text), calc(-5*var(--lSW20)) 0 var(--light-text), calc(-6*var(--lSW20)) 0 var(--light-text), calc(-7*var(--lSW20)) 0 var(--light-text), calc(-8*var(--lSW20)) 0 var(--light-text), calc(-9*var(--lSW20)) -10px var(--light-text);
    }
}

Style 21

<div class="loader-wrapper">
    <span class="loader style-21"></span>
</div>
:root {
    --light-base-background: #fff;
    --light-primary-actived-background: #4946d3;
    --global-white: #fff;
}
.loader-wrapper {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    background-color: var(--light-base-background);
    width: 100%;
    height: 100%;
    z-index: 99999999999999;
}
.loader-wrapper .loader {
    position: absolute;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}
.loader.style-21 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    background: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--light-primary-actived-background)), color-stop(0, transparent)) right/200% 100%;
    background: linear-gradient(90deg, var(--light-primary-actived-background) 50%, transparent 0) right/200% 100%;
    -webkit-animation: loaderStyle21 2s infinite linear;
        animation: loaderStyle21 2s infinite linear;
}
.loader.style-21::before {
    content: "Loading...";
    color: transparent;
    padding: 0 5px;
    background: inherit;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--global-white)), color-stop(0, var(--light-primary-actived-background)));
    background-image: linear-gradient(90deg, var(--global-white) 50%, var(--light-primary-actived-background) 0);
    background-clip: text;
}
@-webkit-keyframes loaderStyle21 {
    100% {
        background-position: left;
    }
}
@keyframes loaderStyle21 {
    100% {
        background-position: left;
    }
}

Style 22

<div class="loader-wrapper">
    <span class="loader style-22"></span>
</div>

Style 23

<div class="loader-wrapper">
    <span class="loader style-23"></span>
</div>

Style 24

<div class="loader-wrapper">
    <span class="loader style-24"></span>
</div>

Style 25

<div class="loader-wrapper">
    <span class="loader style-25"></span>
</div>

Style 26

<div class="loader-wrapper">
    <span class="loader style-26"></span>
</div>

Style 27

<div class="loader-wrapper">
    <span class="loader style-27"></span>
</div>

Style 28

<div class="loader-wrapper">
    <span class="loader style-28"></span>
</div>

Style 29

<div class="loader-wrapper">
    <span class="loader style-29"></span>
</div>

Style 30

<div class="loader-wrapper">
    <span class="loader style-30"></span>
</div>

Style 31

<div class="loader-wrapper">
    <span class="loader style-31"></span>
</div>

Style 32

<div class="loader-wrapper">
    <span class="loader style-32"></span>
</div>

Style 33

<div class="loader-wrapper">
    <span class="loader style-33"></span>
</div>

Style 34

<div class="loader-wrapper">
    <span class="loader style-34"></span>
</div>

Style 35

<div class="loader-wrapper">
    <span class="loader style-35"></span>
</div>

Style 36

<div class="loader-wrapper">
    <span class="loader style-36"></span>
</div>

Style 37

<div class="loader-wrapper">
    <span class="loader style-37"></span>
</div>

Style 38

<div class="loader-wrapper">
    <span class="loader style-38"></span>
</div>

Style 39

<div class="loader-wrapper">
    <span class="loader style-39"></span>
</div>

Style 40

<div class="loader-wrapper">
    <span class="loader style-40"></span>
</div>