WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Estrutura HTML de animação de carregamento CSS
47
ByBy.inc
Abrir no Editor
Publique Seu Código
Recomendado
14 May 2025
Um código de kaiser.zulassungsservice.gmbh
9 July 2025
Menu de contexto de vidro neon com seletor de cores
23 August 2025
Nova Gym: Centro de Fitness, Bem-Estar e Esportes
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) */