HTML
CSS
JS
Result
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Google loading logo using HTML and CSS</title> </head> <body> <div class="loader"> <div class="common-circle blue-circle"></div> <div class="common-circle red-circle"></div> <div class="common-circle yellow-circle"></div> <div class="common-circle green-circle "></div> </div> </body> </html>
CSS
body { min-height: 100vh; display: grid; place-items: center; } .loader { width: 100%; display: flex; justify-content: center; position: absolute; align-items: center; overflow: hidden; } .common-circle { width: 20px; height: 20px; margin: 10px; border-radius: 50%; } .blue-circle { background: #4185F4; animation: ballMoves 1000ms ease-in-out infinite; } .red-circle { background: #EA4235; animation: ballMoves 1000ms 100ms ease-in-out infinite; } .yellow-circle { background: #F9BD00; animation: ballMoves 1000ms 200ms ease-in-out infinite; } .green-circle { background: #33A853; animation: ballMoves 1000ms 300ms ease-in-out infinite; } @keyframes ballMoves { 0% { transform: translateY(-10px); } 50% { transform: translateY(10px); } 100% { transform: translateY(-10px); } }
JS
Google loading logo using HTML and CSS