WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS लोडिंग एनीमेशन स्निपेट
37
ByBy.inc
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
22 July 2025
CSS लोडिंग आइकन स्पिनर
8 February 2025
एनीमेशन लोडिंग
11 August 2025
P5.js और CSS के साथ 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 { width: 80px; height: 80px; background-color: #fff; border-radius: 50%; animation: loading-animation 2s linear infinite; } @keyframes loading-animation { 0% { transform: scale(1); opacity: 1; } 25% { transform: scale(1.1); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 0.25; } 75% { transform: scale(1.1); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } } div.animation-container::before { width: 100%; height: 100%; background: radial-gradient(hotpink, #f6f6f6); transform: scale(0); animation: expand 2s linear infinite; } @keyframes expand { 0% { transform: scale(0); opacity: 0; } 25% { transform: scale(0.5); opacity: 0.5; } 50% { transform: scale(1); opacity: 1; } 75% { transform: scale(1.1); opacity: 0.5; } 100% { transform: scale(1); opacity: 0; } } div.animation-container::after { width: 100%; height: 100%; background: radial-gradient(hotpink, #f6f6f6); transform: scale(0); animation: pulsate 2s ease-in-out infinite; z-index: 2; } @keyframes pulsate { 0% { transform: scale(0); } 50% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes loading-animation { 0% { transform: scale(1); opacity: 1; } 25% { transform: scale(1.1); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 0.25; } 75% { transform: scale(1.1); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */