/*
* loader.css — Hindu Higher Secondary School
* School Logo Spinner Styles
*
* COPYRIGHT PROTECTED — All rights reserved by the school.
* Add in every page
*/
/* ── Overlay ── */
#hhss-loader {
position: fixed;
inset: 0;
background: rgba(255, 255, 255, 0.90);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
z-index: 99999;
opacity: 1;
transition: opacity 0.3s ease;
}
#hhss-loader.hhss-hidden {
opacity: 0;
pointer-events: none;
}
/* ── Spinner container ── */
.hhss-spinner {
position: relative;
width: 100px;
height: 100px;
}
/* ── Outer rotating ring — Blue top, Amber right ── */
.hhss-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 3.5px solid transparent;
border-top-color: #0D47A1;
border-right-color: #F9A825;
animation: hhss-spin 1.2s cubic-bezier(0.6, 0.1, 0.4, 0.9) infinite;
}
/* ── Inner counter-rotating ring ── */
.hhss-ring-2 {
inset: 10px;
border-width: 2px;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: #0D47A1;
border-left-color: transparent;
opacity: 0.35;
animation-direction: reverse;
animation-duration: 1.8s;
}
/* ── Logo circle in centre ── */
.hhss-logo-circle {
position: absolute;
inset: 18px;
background: #ffffff;
border-radius: 50%;
border: 1.5px solid #C5D3E8;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
animation: hhss-pulse 1.4s ease-in-out infinite;
}
/* If using an actual ![]()
inside the circle */
.hhss-logo-circle img {
width: 46px;
height: 46px;
object-fit: contain;
}
/* ── Text ── */
.hhss-loader-text {
font-family: 'Poppins', sans-serif;
font-size: 15px;
font-weight: 500;
color: #0D2C6C;
letter-spacing: 0.4px;
margin: 0;
text-align: center;
animation: hhss-fade 1.4s ease-in-out infinite;
}
.hhss-loader-sub {
font-family: 'Poppins', sans-serif;
font-size: 12px;
color: #607D8B;
margin: -10px 0 0;
text-align: center;
}
/* ── Bouncing dots ── */
.hhss-dots {
display: flex;
gap: 7px;
}
.hhss-dots span {
width: 7px;
height: 7px;
border-radius: 50%;
background: #0D47A1;
animation: hhss-bounce 1.2s ease-in-out infinite;
}
.hhss-dots span:nth-child(2) {
animation-delay: 0.18s;
background: #1565C0;
}
.hhss-dots span:nth-child(3) {
animation-delay: 0.36s;
background: #F9A825;
}
/* ── Keyframes ── */
@keyframes hhss-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes hhss-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(0.93); }
}
@keyframes hhss-bounce {
0%, 80%, 100% { transform: translateY(0); opacity: 0.45; }
40% { transform: translateY(-7px); opacity: 1; }
}
@keyframes hhss-fade {
0%, 100% { opacity: 0.65; }
50% { opacity: 1; }
}
/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
#hhss-loader {
background: rgba(20, 30, 48, 0.92);
}
.hhss-logo-circle {
background: #1a2540;
border-color: #2a3a5c;
}
.hhss-loader-text {
color: #BBCFEE;
}
.hhss-loader-sub {
color: #7a90a8;
}
.hhss-dots span { background: #5885d0; }
.hhss-dots span:nth-child(2) { background: #3d6ab8; }
.hhss-dots span:nth-child(3) { background: #c49520; }
}
/* ── Mobile ── */
@media (max-width: 480px) {
.hhss-spinner { width: 82px; height: 82px; }
.hhss-logo-circle { inset: 14px; }
.hhss-loader-text { font-size: 14px; }
}