src/index.html

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Echoes Player - Open Source Media Player for Youtube</title>
  <link rel="manifest" href="assets/manifest.json">
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#03A9F4" />
  <style type="text/css">
    html body {
      background-color: #03A9F4;
    }

    .loader-container {
      display: flex;
      height: 100%;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      position: absolute;
      width: 100%;
    }

    .spinner {
      width: 40px;
      height: 40px;

      position: relative;
      margin: 100px auto;
    }

    .loader-label {
      position: absolute;
      transform: translateX(-50%) translateY(-140%);
      left: 50%;
      opacity: 0.5;
      font-size: 3rem;
      font-family: "Open Sans Condensed";
      text-align: center;
      color: white;
    }

    .double-bounce1,
    .double-bounce2 {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #333;
      opacity: 0.6;
      position: absolute;
      top: 0;
      left: 0;

      -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
      animation: sk-bounce 2.0s infinite ease-in-out;
    }

    .double-bounce2 {
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }

    @-webkit-keyframes sk-bounce {
      0%,
      100% {
        -webkit-transform: scale(0.0)
      }
      50% {
        -webkit-transform: scale(1.0)
      }
    }

    @keyframes sk-bounce {
      0%,
      100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      }
      50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
    }
  </style>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Open+Sans' rel='stylesheet' type='text/css'>
  <script async src="https://www.googletagmanager.com/gtag/js?id={GA_PROJECTID}"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    window.GA_PROJECT_ID = '{GA_PROJECTID}';
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', window.GA_PROJECT_ID);
    // gtag('set', {'user_id': 'USER_ID'});
  </script>
  <meta name="google-site-verification" content="{GA_VERIFY_CODE}" />
</head>

<body>
  <section class="loader-container">
    <aside class="loader-label">LOADING ECHOES PLAYER</aside>
    <div class="spinner">
      <div class="double-bounce1"></div>
      <div class="double-bounce2"></div>
    </div>
  </section>
</body>
<script src="https://apis.google.com/js/platform.js?onload=apiLoaded" async defer></script>

</html>