NutriFit - Loading

NutriFit

body { font-family: 'Arial', sans-serif; margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(to bottom right, #e8f5e9, #b9f6ca); /* Light green gradient background */ } #loading-container { display: flex; flex-direction: column; align-items: center; background-color: #fff; /* White card for loading section */ padding: 40px; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* Soft shadow for depth */ } .loading-logo { font-size: 2.5em; font-weight: bold; background: linear-gradient(to right, #4caf50, #8bc34a); /* Green gradient logo */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 30px; letter-spacing: 1px; } .spinner { border: 5px solid rgba(0, 0, 0, 0.1); border-left-color: #4caf50; /* Green spinner */ border-radius: 50%; width: 60px; height: 60px; animation: spin 1.2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #content { text-align: center; background-color: #fff; padding: 50px; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); } .hidden { display: none; } document.addEventListener('DOMContentLoaded', () => { const loadingContainer = document.getElementById('loading-container'); const content = document.getElementById('content'); // Simulate loading time setTimeout(() => { loadingContainer.classList.add('hidden'); content.classList.remove('hidden'); }, 2500); // slightly longer loading for effect });