WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS लोडिंग एनीमेशन HTML संरचना
50
ByBy.inc
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
23 September 2025
CSS लोडिंग एनीमेशन HTML स्निपेट
4 May 2025
उत्तरदायी HTML और CSS नेवबार टेम्पलेट
7 September 2024
HTML चैट बॉक्स टेम्पलेट
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background:url("./thumb.jpg") no-repeat center center; background-color: black; background-size: cover; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; } .codigo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #272822; color: #F8F8F2; font-family: 'Consolas', 'Monaco', monospace; font-size: 18px; padding: 20px; border-radius: 8px; white-space: pre-line; text-align: left; line-height: 1.6; max-height: 25%; max-width: 75%; width: 75%; height: 25%; top:15%; overflow-y: hidden; box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.55); } .selector { color: #F92672; } .property { color: #66D9EF; } .value-number { color: #AE81FF; } .value-string { color: #E6DB74; } .value-color { color: #A6E22E; } .function { color: #A6E22E; } .animation-container { position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; height: 50%; overflow: hidden; background: transparent; } .loading-element { position: relative; width: 200px; height: 200px; border-radius: 50%; background-color: #E6DB74; animation: loading-animation 1s linear infinite; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2), 0 0 50px rgba(0, 0, 0, 0.5), 0 0 100px rgba(255, 255, 255, 0.5); } @keyframes loading-animation { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } } @keyframes fragment-disappearance { 0% { opacity: 1; } 100% { opacity: 0; } } .fragment-1 { position: relative; width: 80px; height: 100px; border-radius: 10px; background-color: #66D9EF; transform: rotate(25deg); animation: fragment-animation 3s linear infinite; } @keyframes fragment-animation { 0% { transform: rotate(25deg) scale(1); bottom: -100px; } 20% { transform: rotate(25deg) scale(1.5); bottom: 150px; } 40% { transform: rotate(25deg) scale(1); bottom: -100px; } 60% { transform: rotate(25deg) scale(0.5); bottom: -150px; } 100% { transform: rotate(25deg) scale(1); bottom: -100px; } } @keyframes fragment-disappearance { 0% { opacity: 1; } 100% { opacity: 0; } } .fragment-2 { position: relative; width: 120px; height: 80px; border-radius: 10px; background-color: #F92672; transform: rotate(-30deg); animation: fragment-animation-2 2s linear infinite; } @keyframes fragment-animation-2 { 0% { transform: rotate(-30deg) scale(1); bottom: -80px; } 20% { transform: rotate(-30deg) scale(1.2); bottom: 50px; } 40% { transform: rotate(-30deg) scale(1); bottom: -80px; } 60% { transform: rotate(-30deg) scale(0.8); bottom: -130px; } 100% { transform: rotate(-30deg) scale(1); bottom: -80px; } } .fragment-3 { position: relative; width: 150px; height: 60px; border-radius: 10px; background-color: #3E8E41; transform: rotate(45deg); animation: fragment-animation-3 4s linear infinite; } @keyframes fragment-animation-3 { 0% { transform: rotate(45deg) scale(1); bottom: -60px; } 25% { transform: rotate(45deg) scale(1.1); bottom: 30px; } 50% { transform: rotate(45deg) scale(1); bottom: -60px; } 75% { transform: rotate(45deg) scale(0.9); bottom: -120px; } 100% { transform: rotate(45deg) scale(1); bottom: -60px; } } .loading-element::before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: #E6DB74; animation: fragment-disappearance 5s linear infinite; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */