New Loader Animation
Home
Snippets
New Loader Animation
HTML
CSS
JS
<div class="loader"></div>
body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #111; overflow: hidden; } .loader { position: relative; width: 100px; height: 100px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.1); border-top: 4px solid #00f2ff; animation: spin 4s linear infinite; } .loader::before { content: ''; position: absolute; width: 20px; height: 20px; background-color: #00f2ff; border-radius: 50%; animation: bounce 2s ease-in-out infinite; } @keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @keyframes bounce { 0%, 100% { top: 0; left: 50%; transform: translateX(-50%); } 50% { top: 100%; left: 50%; transform: translateX(-50%) translateY(-100%); } }
//javascript
Ad #1
Ad #2
Scroll to Top