Google Shimmer Loop
Home
Snippets
Google Shimmer Loop
HTML
CSS
JS
<div class="google-bar"> <div class="stream"></div> </div>
body { margin: 0; background: #ffffff; height: 100vh; display: flex; justify-content: center; align-items: center; } .google-bar { position: relative; width: 120px; height: 6px; background: #f1f3f4; border-radius: 4px; overflow: hidden; } .stream { position: absolute; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, #4285f4 0%, #ea4335 30%, #fbbc05 60%, #34a853 100%); border-radius: 4px; animation: sweep 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes sweep { 0% { left: -100%; width: 30%; } 50% { width: 60%; } 100% { left: 100%; width: 30%; } }
//javascript
Ad #1
Ad #2
Scroll to Top