body,
html {
margin: 0;
padding: 0;
height: 100%;
}
:root {
--loader-light-start: rgba(225, 229, 234, 0.7);
--loader-light-mid: rgba(196, 203, 212, 0.7);
--loader-light-end: rgba(225, 229, 234, 0.7);
--loader-dark-start: #1149e6;
--loader-dark-mid-1: #0d329d;
--loader-dark-mid-2: #0b216a;
--loader-dark-end: #060719;
}
/* ---------------------------------------------------- */
/* --- LIGHT MODE (Default Base Styles) --- */
/* These styles apply automatically unless .dark-mode is added */
body {
background:
radial-gradient(circle at top left, rgba(255, 255, 255, 0.55), transparent 36%),
linear-gradient(
79.78deg,
var(--loader-light-start) -10.35%,
var(--loader-light-mid) 48.37%,
var(--loader-light-end) 107.08%
);
background-repeat: no-repeat;
background-attachment: fixed;
}
/* Loading text color for Light Mode (Dark text) */
.loading-text {
margin-top: 25px;
font-family: -apple-system, BlinkMacSystemFont, "Poppins", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1.1em;
color: #1A1C1E;
}
/* Progress bar track for Light Mode */
#progress-bar-container {
width: 200px;
height: 4px;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 2px;
margin-top: 25px;
overflow: hidden;
position: relative;
}
/* Progress bar fill for Light Mode */
#progress-bar {
width: 50%;
height: 100%;
background-color: #1A1C1E;
border-radius: 2px;
position: absolute;
top: 0;
animation: indeterminate-progress 2s linear infinite;
}
/* ---------------------------------------------------- */
/* --- DARK MODE OVERRIDES --- */
/* These only apply if is set */
body.dark-mode {
background:
radial-gradient(circle at top left, rgba(69, 123, 255, 0.22), transparent 34%),
linear-gradient(
to bottom right,
var(--loader-dark-start) 0%,
var(--loader-dark-mid-1) 25%,
var(--loader-dark-mid-2) 50%,
var(--loader-dark-end) 100%
);
background-repeat: no-repeat;
background-attachment: fixed;
}
body.dark-mode .loading-text {
color: #f0f0f0;
/* Light text */
}
body.dark-mode #progress-bar-container {
background-color: rgba(255, 255, 255, 0.2);
}
body.dark-mode #progress-bar {
background-color: #f0f0f0;
}
/* ---------------------------------------------------- */
/* --- GENERAL LAYOUT & ANIMATION --- */
#app-loader {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
}
#app-loader img {
width: clamp(132px, 16vw, 180px);
height: clamp(132px, 16vw, 180px);
animation: pulse 2s infinite ease-in-out;
filter: drop-shadow(0 16px 34px rgba(17, 73, 230, 0.2));
}
body.dark-mode #app-loader img {
filter: drop-shadow(0 18px 38px rgba(17, 73, 230, 0.36));
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(1.05);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0.8;
}
}
@keyframes indeterminate-progress {
0% {
left: -50%;
}
100% {
left: 100%;
}
}