rainbond-rainbond-ui
/
src
/
index.ejs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>
      Rainbond | Serverless PaaS , A new generation of easy-to-use cloud
      management platforms based on kubernetes.
    </title>
    <link rel="icon" href="/static/dists/favicon.png" type="image/x-icon" />
    <style type="text/css">
      * {
        margin: 0px;
        padding: 0px;
        border: 0px;
      }

      html,
      body {
        min-height: 100%;
      }

      body {
        /* background: radial-gradient(#eeeeee, #444444); */
        background-color: #f0f2f5 !important;
        background-image: url("/static/dists/user-bg.svg");
        background-repeat: no-repeat;
        background-position: center 110px;
        background-size: 100%;
      }
      .roundloading {
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation: rotate 1.5s 0s linear infinite;
        animation: rotate 1.5s 0s linear infinite;
      }

      .loader {
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        margin: auto;
        width: 175px;
        height: 100px;
        transform: scale(0.5);
      }
      .loader span {
        display: block;
        background: #ccc;
        width: 7px;
        height: 10%;
        border-radius: 14px;
        margin-right: 5px;
        float: left;
        margin-top: 25%;
      }
      .loader span:last-child {
        margin-right: 0px;
      }
      .loader span:nth-child(1) {
        animation: load 2s 1.4s infinite linear;
      }
      .loader span:nth-child(2) {
        animation: load 2s 1.2s infinite linear;
      }
      .loader span:nth-child(3) {
        animation: load 2s 1s infinite linear;
      }
      .loader span:nth-child(4) {
        animation: load 2s 0.8s infinite linear;
      }
      .loader span:nth-child(5) {
        animation: load 2s 0.6s infinite linear;
      }
      .loader span:nth-child(6) {
        animation: load 2s 0.4s infinite linear;
      }
      .loader span:nth-child(7) {
        animation: load 2s 0.2s infinite linear;
      }
      .loader span:nth-child(8) {
        animation: load 2s 0s infinite linear;
      }
      .loader span:nth-child(9) {
        animation: load 2s 0.2s infinite linear;
      }
      .loader span:nth-child(10) {
        animation: load 2s 0.4s infinite linear;
      }
      .loader span:nth-child(11) {
        animation: load 2s 0.6s infinite linear;
      }
      .loader span:nth-child(12) {
        animation: load 2s 0.8s infinite linear;
      }
      .loader span:nth-child(13) {
        animation: load 2s 1s infinite linear;
      }
      .loader span:nth-child(14) {
        animation: load 2s 1.2s infinite linear;
      }
      .loader span:nth-child(15) {
        animation: load 2s 1.4s infinite linear;
      }

      @keyframes load {
        0% {
          background: #2593fb;
          height: 10%;
          margin-top: 25%;
        }
        50% {
          background: #339afb;
          height: 100%;
          margin-top: 0%;
        }
        100% {
          background: #56aafa;
          height: 10%;
          margin-top: 25%;
        }
      }

      @-webkit-keyframes rotate {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        50% {
          -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      @keyframes rotate {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        50% {
          -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

    </style>
  </head>

  <body>
    <div id="root"></div>
    <div class="loader">
      <span></span> <span></span> <span></span> <span></span> <span></span>
      <span></span> <span></span> <span></span> <span></span> <span></span>
      <span></span> <span></span> <span></span> <span></span> <span></span>
    </div>
    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?16ccc1d277432a3c95fefb06a37dedef";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();
    </script>
  </body>
</html>