/home/sylamedg/www/wp-content/themes/neom-blog/assets/css/loading-icon.css
body.no-scroll {
overflow: hidden; /* Disables scrolling */
}
.loader-container {
display: flex;
align-items: center;
justify-content: center;
position: fixed; /* Fixed position */
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
background-color: #222222;
z-index: 1000; /* Ensures it's above all other content */
}
.loader {
display: block;
position: relative;
height: 20px;
width: 86px;
}
.loading-square {
position: absolute;
height: 20px;
width: 20px;
top: 0;
background-color: #97c900; /* Default color */
}
.loading-square:nth-child(1) {
left: 0;
animation: square1 1.5s linear infinite;
}
.loading-square:nth-child(2) {
left: 22px;
animation: square2 1.5s linear infinite;
}
.loading-square:nth-child(3) {
left: 44px;
animation: square3 1.5s linear infinite;
}
.loading-square:nth-child(4) {
left: 66px;
animation: square4 1.5s linear infinite;
}
@keyframes square1 {
0%, 27.27273% {
background-color: #97c900;
transform: translate(0, 0);
}
9.09091% {
transform: translate(0, calc(-100% - 2px));
}
18.18182% {
transform: translate(calc(100% + 2px), calc(-100% - 2px));
background-color: #15668a;
}
}
@keyframes square2 {
0%, 18.18182%, 45.45455% {
background-color: #15668a;
transform: translate(0, 0);
}
27.27273% {
transform: translate(0, calc(100% + 2px));
}
36.36364% {
transform: translate(calc(100% + 2px), calc(100% + 2px));
background-color: #D53A33;
}
}
@keyframes square3 {
0%, 36.36364%, 63.63636% {
background-color: #D53A33;
transform: translate(0, 0);
}
45.45455% {
transform: translate(0, calc(-100% - 2px));
}
54.54545% {
transform: translate(calc(100% + 2px), calc(-100% - 2px));
background-color: #E79C10;
}
}
@keyframes square4 {
0%, 54.54545% {
background-color: #E79C10;
transform: translate(0, 0);
}
63.63636% {
transform: translate(0, calc(100% + 2px));
}
72.72727% {
background-color: #D53A33;
}
81.81818% {
background-color: #15668a;
}
90.90909% {
transform: translate(calc(-300% - 6px), calc(100% + 2px));
background-color: #97c900;
}
100% {
transform: translate(calc(-300% - 6px), 0);
}
}