<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TeaClient</title> <style type="text/css"> html, body { background: #18BC9C; user-select: none; } body { text-align: center; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin-left: 18px; margin-right: 18px; display: flex; flex-direction: column; justify-content: center; -ms-overflow-style: none; -webkit-app-region: drag; } img { position: absolute; display: block; width: 200px; height: 200px; } .smoke { z-index: 2; } .logo { z-index: 1; } .container-logo { align-self: center; position: relative; display: inline-block; width: 200px; height: 200px; } .container-info a { display: inline-block; color: #FFFFFF; font-family: "Arial",serif; font-size: 20px; } .container-bar { position: relative; margin-top: 5px; border: white solid 2px; height: 18px; } .container-bar .bar { z-index: 1; position: absolute; display: block; background: whitesmoke; border: none; width: 0%; height: 100%; } </style> <script type="application/ecmascript">const exports = {};</script> <script type="application/ecmascript" src="loader.js"></script> </head> <body> <div class="container-logo"> <img class="logo" src="img/logo.svg"> <img class="smoke" src="img/smoke.png"> </div> <div class="container-info"> <a id="loading-text">Loading... Please wait!</a> <div class="container-bar"> <div class="bar"></div> </div> </div> </body> </html>