<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; font-family: "Roboto", sans-serif; background: #0f1a2e; } .center { margin-top: 50%; transform: translateY(-50%); width auto; height: auto; overflow: hidden; } .loader { border: 16px solid #f3f3f3; border-radius: 50%; border-top: 16px solid #03a9f4; width: 120px; height: 120px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="center"> <div style="display: flex; justify-content: center;"> <div class="loader"></div> <br> </div> <div style="display: flex; justify-content: center;"> <h3 style="color: #c9d2d9;">Downloading... Please Wait...</h3> </div> </div> </body> </html>