Preloader Animation
Home
Snippets
Preloader Animation
HTML
CSS
JS
<div class="preloader"> <span></span> <span></span> <span></span> </div>
* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, #6a11cb, #2575fc); font-family: Arial, sans-serif; } .preloader { display: flex; gap: 10px; } .preloader span { width: 15px; height: 15px; background: #fff; border-radius: 50%; animation: bounce 0.6s infinite alternate; } .preloader span:nth-child(2) { animation-delay: 0.2s; } .preloader span:nth-child(3) { animation-delay: 0.4s; } @keyframes bounce { from { transform: translateY(0); opacity: 0.6; } to { transform: translateY(-20px); opacity: 1; } }
// JavaScript
Ad #1
Ad #2
Scroll to Top