WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS Loading Animation: Circle Loader
498
ByBy.inc
Open In Editor
Publish Your Code
Recommended
23 November 2025
Firefly Button HTML CSS Tailwind
25 July 2025
3D Login Signup Box HTML CSS
24 July 2025
CSS Toggle Switch HTML Code
HTML
Copy
CSS
Copy
/* foundation css */ * { 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; } @keyframes loading-animation { 0% { transform: translateY(0); opacity: 0; } 10% { transform: translateY(-10px); opacity: 0.5; } 50% { transform: translateY(20px); opacity: 1; } 90% { transform: translateY(-10px); opacity: 0.5; } 100% { transform: translateY(0); opacity: 0; } } .loading-element { border-radius: 50%; width: 30px; height: 30px; animation: loading-animation 1s linear infinite; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #666; box-shadow: 0 0 10px #666; } .circle1 { width: 30px; height: 30px; border-radius: 50%; background-color: #666; animation: loading-animation 2s linear infinite; position: absolute; top: 70%; left: 30%; transform: translate(-50%, -50%); box-shadow: 0 0 20px #666; } @keyframes ripple-animation { 0% { width: 0; height: 0; opacity: 0; } 50% { width: 100px; height: 100px; opacity: 0.2; } 100% { width: 0; height: 0; opacity: 0; } } .circle2 { width: 30px; height: 30px; border-radius: 50%; background-color: #666; animation: ripple-animation 1.5s ease-out; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 10px #666; } .circle3 { width: 10px; height: 10px; border-radius: 50%; background-color: #333; animation: pulse-animation 1.5s ease-out; position: absolute; top: 75%; left: 70%; transform: translate(-50%, -50%); box-shadow: 0 0 5px #333; } @keyframes pulse-animation { 0% { width: 0; height: 0; opacity: 0; } 50% { width: 80px; height: 80px; opacity: 0.5; } 100% { width: 0; height: 0; opacity: 0; } } .circle4 { width: 30px; height: 30px; border-radius: 50%; background-color: #666; animation: loading-animation 2.5s linear infinite; position: absolute; top: 80%; left: 40%; transform: translate(-50%, -50%); box-shadow: 0 0 20px #666; } .circle5 { width: 10px; height: 10px; border-radius: 50%; background-color: #666; animation: loading-animation 2.5s linear infinite; position: absolute; top: 60%; left: 80%; transform: translate(-50%, -50%); box-shadow: 0 0 5px #666; } .circle6 { width: 10px; height: 10px; border-radius: 50%; background-color: #666; animation: ripple-animation 2.5s ease-out; position: absolute; top: 40%; left: 60%; transform: translate(-50%, -50%); box-shadow: 0 0 5px #666; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */