192 lines
3.6 KiB
CSS
192 lines
3.6 KiB
CSS
/**
|
|
* LoadingScreen Styles
|
|
*
|
|
* Circular progress meter that stays still while the arc fills.
|
|
* No spinning animation - clean, modern progress indicator.
|
|
*
|
|
* © 2025 Netwerk Digitaal Erfgoed & TextPast. All rights reserved.
|
|
*/
|
|
|
|
/* Base container */
|
|
.loading-screen {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.loading-screen--fullscreen {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
|
z-index: 9999;
|
|
}
|
|
|
|
.loading-screen--inline {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 200px;
|
|
background: transparent;
|
|
}
|
|
|
|
/* Content wrapper */
|
|
.loading-screen__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
/* Circular meter container */
|
|
.loading-screen__meter {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.loading-screen__meter--small {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.loading-screen__meter--medium {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
|
|
.loading-screen__meter--large {
|
|
width: 120px;
|
|
height: 120px;
|
|
}
|
|
|
|
/* SVG styling */
|
|
.loading-screen__svg {
|
|
display: block;
|
|
}
|
|
|
|
/* Track (background circle) */
|
|
.loading-screen__track {
|
|
stroke: #e2e8f0;
|
|
transition: stroke 0.3s ease;
|
|
}
|
|
|
|
/* Progress arc */
|
|
.loading-screen__progress {
|
|
stroke: #0a3dfa;
|
|
transition: stroke-dashoffset 0.15s ease-out, stroke 0.3s ease;
|
|
}
|
|
|
|
/* Center content (icon or percentage) */
|
|
.loading-screen__center {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.loading-screen__icon {
|
|
font-size: 1.5rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.loading-screen__meter--small .loading-screen__icon {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.loading-screen__meter--large .loading-screen__icon {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.loading-screen__percentage {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: #172a59;
|
|
}
|
|
|
|
.loading-screen__meter--small .loading-screen__percentage {
|
|
font-size: 0.625rem;
|
|
}
|
|
|
|
.loading-screen__meter--large .loading-screen__percentage {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
/* Message text */
|
|
.loading-screen__message {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
color: #172a59;
|
|
text-align: center;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Optional linear progress bar */
|
|
.loading-screen__bar {
|
|
width: 200px;
|
|
height: 4px;
|
|
background: #e2e8f0;
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.loading-screen__bar-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #0a3dfa 0%, #3b82f6 100%);
|
|
border-radius: 2px;
|
|
transition: width 0.15s ease-out;
|
|
}
|
|
|
|
/* ============================================
|
|
DARK MODE STYLES
|
|
============================================ */
|
|
|
|
[data-theme="dark"] .loading-screen--fullscreen {
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
|
}
|
|
|
|
[data-theme="dark"] .loading-screen__track {
|
|
stroke: #3a3a5a;
|
|
}
|
|
|
|
[data-theme="dark"] .loading-screen__progress {
|
|
stroke: #4a7cff;
|
|
}
|
|
|
|
[data-theme="dark"] .loading-screen__percentage {
|
|
color: #e0e0f0;
|
|
}
|
|
|
|
[data-theme="dark"] .loading-screen__message {
|
|
color: #e0e0f0;
|
|
}
|
|
|
|
[data-theme="dark"] .loading-screen__bar {
|
|
background: #3a3a5a;
|
|
}
|
|
|
|
[data-theme="dark"] .loading-screen__bar-fill {
|
|
background: linear-gradient(90deg, #4a7cff 0%, #7c9aff 100%);
|
|
}
|
|
|
|
/* ============================================
|
|
MOBILE RESPONSIVE
|
|
============================================ */
|
|
|
|
@media (max-width: 480px) {
|
|
.loading-screen__message {
|
|
font-size: 0.875rem;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.loading-screen__bar {
|
|
width: 160px;
|
|
}
|
|
}
|