WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Frammento di animazione di caricamento CSS
38
ByBy.inc
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
30 March 2025
Un codice di ytr3d3
29 September 2025
Caricamento CSS con animazione e immagine di sfondo
26 March 2025
Modulo multi-step con barra di avanzamento utilizzando jQuery e CSS3
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) */