.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.5s, visibility 0.5s;
}
.preloader.hidden {
opacity: 0;
visibility: hidden;
} .dark-mode .preloader {
background-color: #121212;
} .preloader-style1 .spinner {
width: 60px;
height: 60px;
border: 5px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top-color: var(--primary-color, #000);
animation: spin 1s ease-in-out infinite;
} .preloader-style2 .dots {
display: flex;
justify-content: center;
align-items: center;
}
.preloader-style2 .dot {
width: 15px;
height: 15px;
margin: 0 5px;
border-radius: 50%;
background-color: var(--primary-color, #000);
animation: bounce 1.4s infinite ease-in-out both;
}
.preloader-style2 .dot:nth-child(1) {
animation-delay: -0.32s;
}
.preloader-style2 .dot:nth-child(2) {
animation-delay: -0.16s;
} .preloader-style3 .progress-container {
width: 200px;
height: 5px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 5px;
overflow: hidden;
}
.preloader-style3 .progress-bar {
height: 100%;
width: 0;
background-color: var(--primary-color, #000);
animation: progress 2s ease-in-out infinite;
} @keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes bounce {
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
@keyframes progress {
0% {
width: 0%;
}
50% {
width: 100%;
}
100% {
width: 0%;
}
}