#loader {
    position: fixed; top: 0; left: 0; 
    right: 0; bottom: 0; display: flex; 
    flex-direction: column; align-items: 
    center; justify-content: center; 
    background: #000; 
    z-index: 1000;
    font-weight: 800;
}
#loader h1 {
    color: #fff; 
    font-size: 1.8rem; margin-bottom: 2rem; 
    text-align: center; opacity: 0.9; 
    text-shadow: 0 2px 4px rgba(0, 0, 0, 
    0.1);
}
#loader h2 {
    color: #333; 
    font-size: 1.1rem; position: relative; 
    margin-top: 2rem;
}
/* Анимированные точки */
#loader h2::after {
    content: '.'; animation: dots 1.5s 
    infinite steps(4); position: absolute; 
    right: -1.2em; width: 1em;
}
/* Круговой лоадер */
#loader::before {
    content: ''; width: 50px; height: 50px; 
    border-radius: 50%; border: 3px solid 
    #333; 
    border-top-color: 
    #fff; 
    animation: spin 1s linear infinite; 
    margin-bottom: 1.5rem;
}
@keyframes spin { to { transform: 
        rotate(360deg);
    }
}
@keyframes dots { 0% { content: ''; } 25% { 
    content: '.'; } 50% { content: '..'; } 
    75% { content: '...'; } 100% { content: 
    ''; }
}