46 lines
1.2 KiB
CSS
46 lines
1.2 KiB
CSS
/* --- Page Loader Styles --- */
|
|
.page-loader-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: #ffffff;
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: opacity 0.5s ease, visibility 0.5s ease;
|
|
|
|
/* Optional: If that faint pattern in your screenshot is a background image, uncomment and add it here: */
|
|
/* background-image: url('../images/faint-watermark-pattern.png'); */
|
|
/* background-size: cover; */
|
|
/* background-position: center; */
|
|
}
|
|
|
|
.loader-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.loader-logo {
|
|
max-width: 250px; /* Adjust this width to match the scale of your actual logo image */
|
|
height: auto;
|
|
}
|
|
|
|
/* Thicker, slightly larger spinner to match your design */
|
|
.loader-spinner {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
border-width: 0.3em;
|
|
/* If your primary blue isn't exactly matching the logo, force the hex color here: */
|
|
/* color: #0d6efd !important; */
|
|
}
|
|
|
|
/* Class applied by JavaScript to trigger the fade-out animation */
|
|
.page-loader-overlay.fade-out {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
} |