jekyll transition

_layouts/default.html

@@ -54,8 +54,8 @@
     <a href="#main-content" class="skip-link">Skip to main content</a>
 
     <!-- Loading Screen -->
-    <div class="loading-screen glass" data-loading-screen>
-        <div class="spinner gradient-primary"></div>
+    <div class="loading-container loading-timeout" id="loading-screen">
+        <div class="loading-spinner"></div>
     </div>
 
     {% include navigation.html %}

_sass/_loading.scss

@@ -0,0 +1,79 @@
+/* Loading Animation */
+.loading-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--surface-0); // Dark background
+    z-index: var(--z-modal);
+    opacity: 1;
+    transition: opacity 0.3s ease-out;
+
+    &.loaded {
+        opacity: 0;
+        pointer-events: none;
+    }
+}
+
+.loading-spinner {
+    width: 48px;
+    height: 48px;
+    position: relative;
+    animation: loading-fade 1.2s ease-in-out infinite;
+
+    &::before,
+    &::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        animation: pulse 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+    }
+
+    &::before {
+        background: var(--accent-fuchsia); // Fuchsia color
+        animation-delay: -0.3s;
+    }
+
+    &::after {
+        background: var(--accent-purple); // Royal purple color
+        animation-delay: -0.15s;
+    }
+}
+
+@keyframes pulse {
+    0%, 100% {
+        transform: scale(0);
+        opacity: 1;
+    }
+    50% {
+        transform: scale(1);
+        opacity: 0.3;
+    }
+}
+
+@keyframes loading-fade {
+    0%, 100% {
+        opacity: 0.3;
+    }
+    50% {
+        opacity: 1;
+    }
+}
+
+// Hide loading container after 3 seconds max
+.loading-timeout {
+    animation: hide-loading 0.3s ease-out 3s forwards;
+}
+
+@keyframes hide-loading {
+    to {
+        opacity: 0;
+        visibility: hidden;
+    }
+}

assets/css/main.scss

@@ -6,6 +6,7 @@
 @import "theme";
 @import "base";
 @import "navigation";
+@import "loading";
 
 // Reset
 *,

assets/js/loading.js

@@ -0,0 +1,14 @@
+// Loading Screen Handler
+document.addEventListener('DOMContentLoaded', () => {
+    const loadingScreen = document.getElementById('loading-screen');
+
+    // Add loaded class to trigger fade out
+    if (loadingScreen) {
+        loadingScreen.classList.add('loaded');
+
+        // Remove from DOM after animation
+        loadingScreen.addEventListener('transitionend', () => {
+            loadingScreen.remove();
+        });
+    }
+});

assets/js/main.js

@@ -3,6 +3,7 @@ import { MaterialDesign } from './modules/core/MaterialDesign.js';
 import { AnimationSystem } from './modules/ui/Animation.js';
 import { ThemeSystem } from './modules/ui/Theme.js';
 import { PerformanceSystem } from './modules/utils/Performance.js';
+import './loading.js';  // Import loading handler
 
 // Initialize all systems when DOM is ready
 document.addEventListener('DOMContentLoaded', () => {