WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animated Loading Page
2225
codex
Open In Editor
Publish Your Code
Recommended
30 September 2025
CSS Loading Animation with Waves and Ripples
13 June 2025
egg toasting loading
21 May 2025
Animated lamp
HTML
Copy
CSS
Copy
body{ display:flex; justify-content:center; align-items:center; height:100vh; background:#212121; overflow:hidden } .loader { display: inline-block; position: relative; width: 80px; height: 80px; } .loader div { position: absolute; top: 33px; width: 13px; height: 13px; border-radius: 50%; background: #c517f0; animation-timing-function: cubic-bezier(0, 1, 1, 0); } .loader div:nth-child(1) { left: 8px; animation: flip1 0.6s infinite; } .loader div:nth-child(2) { left: 8px; animation: flip2 0.6s infinite; } .loader div:nth-child(3) { left: 32px; animation: flip2 0.6s infinite; } .loader div:nth-child(4) { left: 56px; animation: flip3 0.6s infinite; } @keyframes flip1 { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes flip3 { 0% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes flip2 { 0% { transform: translate(0, 0); } 100% { transform: translate(24px, 0); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */