Liquid Loader
Home
Snippets
Liquid Loader
HTML
CSS
JS
<div class="loader"></div>
body { margin: 0; background: #5555; height: 100vh; display: flex; align-items: center; justify-content: center; } .loader { position: relative; width: 150px; height: 150px; border-radius: 50%; background: linear-gradient(145deg, #1a2b3a, #0c1a25); box-shadow: inset -5px -5px 15px #0c1a25, inset 5px 5px 15px #1a2b3a; overflow: hidden; } .loader::before { content: ''; position: absolute; width: 200%; height: 200%; background: rgba(0, 255, 255, 0.3); top: -100%; left: -50%; border-radius: 45%; animation: liquid 4s linear infinite; } @keyframes liquid { 0% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(180deg) translateY(20%); } 100% { transform: rotate(360deg) translateY(0); } }
//javascript
Ad #1
Ad #2
Scroll to Top