/* Blazor Loading Screen Styles */ /* ======================================================================== SESSION 3: CROSS-FADE TRANSITION - Server Loading → Blazor App ======================================================================== */ /* CSS Variables for easy experimentation - tweak these in browser DevTools! Open DevTools → Elements → → Styles → Edit these values live */ :root { /* Timing controls */ --app-fade-in-duration: 600ms; /* How long app takes to fade in */ --loading-fade-out-duration: 400ms; /* How long loading screen takes to fade out */ --loading-fade-out-delay: 200ms; /* Delay before loading starts fading out */ /* Easing functions - try: ease, ease-in, ease-out, ease-in-out, linear */ --app-fade-in-easing: ease-out; --loading-fade-out-easing: ease-in; /* Z-index layering (app should be on top) */ --loading-screen-z-index: 1; --blazor-app-z-index: 2; } /* Blazor app wrapper - initially hidden */ .blazor-app-loading { opacity: 0; pointer-events: none; position: relative; z-index: var(--blazor-app-z-index); } /* Blazor app wrapper - fades in when theme loaded */ .blazor-app-loaded { opacity: 1; pointer-events: auto; position: relative; z-index: var(--blazor-app-z-index); animation: fadeInApp var(--app-fade-in-duration) var(--app-fade-in-easing); } @keyframes fadeInApp { from { opacity: 0; transform: scale(0.98); /* Optional: slight zoom effect */ } to { opacity: 1; transform: scale(1); } } /* Server loading screen - fades out when Blazor app is loaded */ #app > div[style*="position:fixed"] { position: fixed; z-index: var(--loading-screen-z-index); transition: opacity var(--loading-fade-out-duration) var(--loading-fade-out-easing); transition-delay: var(--loading-fade-out-delay); } /* Cross-fade: Hide loading screen when app is loaded */ .blazor-app-loaded ~ #app > div[style*="position:fixed"] { opacity: 0; pointer-events: none; } /* After fade completes, remove from layout */ .blazor-app-loaded ~ #app > div[style*="position:fixed"] { animation: removeFromLayout calc(var(--loading-fade-out-duration) + var(--loading-fade-out-delay) + 100ms) forwards; } @keyframes removeFromLayout { 99% { display: block; } 100% { display: none; } } /* Keyframe Animations */ @keyframes pulse-donut { from { transform: translate(-50%, -50%) scale(0.35); opacity: 0.1; } to { transform: translate(-50%, -50%) scale(1.1); opacity: 0.5; } } @keyframes slide { 0% { transform: translateX(-25%); } 100% { transform: translateX(25%); } } /* Background Animation Layer */ .mud-wasm { animation: slide 3s ease-in-out infinite alternate; background-image: linear-gradient(-60deg, var(--blazor-bg-color, #555d66) 50%, #DACDBE 50%); bottom: 0; left: -50%; opacity: .25; position: fixed; right: -50%; top: 0; z-index: -2; } /* Donut Pulse Layers */ .donut-layer { position: fixed; top: 50%; left: 50%; width: 90vmin; height: 90vmin; border-radius: 50%; border: 26vmin solid #DACDBE; animation: pulse-donut 4s ease-in-out infinite alternate; z-index: -1; } /* Main Container */ .mud-wasm-cont { width: 99vmin; left: 50%; padding: 5vmin; position: fixed; text-align: center; top: 50%; transform: translate(-50%, -50%); } /* Logo Container */ .logo-container { width: 100%; height: 350px; display: flex; align-items: center; justify-content: center; } /* Logo Animations */ @keyframes fadeIn { from { opacity: 0; transform: scale(0.75); } to { opacity: 1; transform: scale(1); } } @keyframes dePixelate { from { opacity: 0; filter: blur(10px); transform: scale(0.98); } to { opacity: 1; filter: blur(0px); transform: scale(1); } } .logo-container svg { height: 100%; width: auto; max-width: 100%; /* Hardware acceleration for smoother animation */ will-change: transform, opacity, filter; /* Choose one animation: */ animation: fadeIn 3s ease; /* animation: dePixelate 1s cubic-bezier(0.4, 0.0, 0.2, 1);*/ /* animation: dePixelate 2s linear;*/ } /* Custom Blazor Loading Bar Styles */ #blazor-loading-bar-container { width: 100%; height: 1rem; margin-top: 10px; opacity: 1; transition: opacity 0.5s ease-out; } #blazor-loading-bar { width: var(--blazor-load-percentage, 0%); height: 100%; background-color: white; transition: width 0.1s ease-out; } /* Hide the container when Blazor is loaded */ body.blazor-loaded #blazor-loading-bar-container { opacity: 0; pointer-events: none; } /* Blazor error UI */ #blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* Legacy loader styles for backward compatibility */ .loader-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--blazor-bg-color, #fff); z-index: 99999; } .loader { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; font-size: 0; color: #00c9d0; display: inline-block; margin: -25px 0 0 -25px; text-indent: -9999em; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } .loader div { background-color: rgba(255, 255, 255, 0.3); display: inline-block; float: none; position: absolute; top: 0; left: 0; width: 50px; height: 50px; opacity: 0.5; border-radius: 50%; -webkit-animation: ballPulseDouble 2s ease-in-out infinite; animation: ballPulseDouble 2s ease-in-out infinite; } .loader div:last-child { -webkit-animation-delay: -1s; animation-delay: -1s; } @-webkit-keyframes ballPulseDouble { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes ballPulseDouble { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } }