<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;
}
}
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<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;
}
}
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<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%;
}
}
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<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);
}
}
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<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);
}
}
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<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);
}
}
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<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;
}
}
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<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;
}
}
<!-- Special For Portal -->
<link href="https://portal..co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<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);
}
}
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<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;
}
}
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<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%));
}
}
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<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%));
}
}
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<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%));
}
}
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<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);
}
}
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<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);
}
}
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<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;
}
}
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<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);
}
}
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<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);
}
}
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<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;
}
}
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<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);
}
}
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<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;
}
}
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<div class="loader-wrapper">
<span class="loader style-22"></span>
</div>
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<div class="loader-wrapper">
<span class="loader style-23"></span>
</div>
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<div class="loader-wrapper">
<span class="loader style-24"></span>
</div>
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<div class="loader-wrapper">
<span class="loader style-25"></span>
</div>
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<div class="loader-wrapper">
<span class="loader style-26"></span>
</div>
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<div class="loader-wrapper">
<span class="loader style-27"></span>
</div>
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<div class="loader-wrapper">
<span class="loader style-28"></span>
</div>
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<div class="loader-wrapper">
<span class="loader style-29"></span>
</div>
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<div class="loader-wrapper">
<span class="loader style-30"></span>
</div>
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<div class="loader-wrapper">
<span class="loader style-31"></span>
</div>
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<div class="loader-wrapper">
<span class="loader style-32"></span>
</div>
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<div class="loader-wrapper">
<span class="loader style-33"></span>
</div>
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<div class="loader-wrapper">
<span class="loader style-34"></span>
</div>
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<div class="loader-wrapper">
<span class="loader style-35"></span>
</div>
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<div class="loader-wrapper">
<span class="loader style-36"></span>
</div>
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<div class="loader-wrapper">
<span class="loader style-37"></span>
</div>
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<div class="loader-wrapper">
<span class="loader style-38"></span>
</div>
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<div class="loader-wrapper">
<span class="loader style-39"></span>
</div>
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">
<div class="loader-wrapper">
<span class="loader style-40"></span>
</div>
<!-- Special For Portal -->
<link href="https://portal.geekaxon.co.uk/assets/css/minified/components/user-interface/loaders/classic.min.css" rel="stylesheet">