html加载页面 - 技术栈

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>算数模一体化</title>
</head>

<body>
  <div class="content">
    <div class="loader JS_on">
      <span class="binary"></span>
      <span class="binary"></span>
    </div>
    <span class="getting-there">当前模型训练【模型名称】加载中...</span>
    <div class="progress-bar" id="myElement"></div>
  </div>
  <style>
    html,
    body {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #2D4654;
    }

    .content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .loader {
      width: 130px;
      height: 170px;
      position: relative;

      &::before,
      &::after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        bottom: 30px;
        left: 15px;
        z-index: 1;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 20px solid #1b2a33;
        transform: scale(0);
        transition: all 0.2s ease;
      }

      &::after {
        border-right: 15px solid transparent;
        border-bottom: 20px solid #162229;
      }

      .binary {
        width: 100%;
        height: 140px;
        display: block;
        color: white;
        position: absolute;
        top: 0;
        left: 15px;
        z-index: 2;
        overflow: hidden;

        &::before,
        &::after {
          font-family: "Lato";
          font-size: 24px;
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
        }

        &:nth-child(1) {
          &::before {
            content: "0";
            animation: a 1.1s linear infinite;
          }

          &::after {
            content: "0";
            animation: b 1.3s linear infinite;
          }
        }

        &:nth-child(2) {
          &::before {
            content: "1";
            animation: c 0.9s linear infinite;
          }

          &::after {
            content: "1";
            animation: d 0.7s linear infinite;
          }
        }
      }

      &.JS_on {

        &::before,
        &::after {
          transform: scale(1);
        }
      }
    }

    @keyframes a {
      0% {
        transform: translate(30px, 0) rotate(30deg);
        opacity: 0;
      }

      100% {
        transform: translate(30px, 150px) rotate(-50deg);
        opacity: 1;
      }
    }

    @keyframes b {
      0% {
        transform: translate(50px, 0) rotate(-40deg);
        opacity: 0;
      }

      100% {
        transform: translate(40px, 150px) rotate(80deg);
        opacity: 1;
      }
    }

    @keyframes c {
      0% {
        transform: translate(70px, 0) rotate(10deg);
        opacity: 0;
      }

      100% {
        transform: translate(60px, 150px) rotate(70deg);
        opacity: 1;
      }
    }

    @keyframes d {
      0% {
        transform: translate(30px, 0) rotate(-50deg);
        opacity: 0;
      }

      100% {
        transform: translate(45px, 150px) rotate(30deg);
        opacity: 1;
      }
    }

    .getting-there {
      text-align: center;
      font-family: "Lato";
      font-size: 16px;
      letter-spacing: 2px;
      color: white;
    }

    .progress-bar {
      background-color: #fff;
      width: 300px;
      height: 16px;
      box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.25), 0px 1px 2px rgba(0, 0, 0, 0.25);
      border-radius: 10px;
      position: relative;
      margin-top: 10px;
    }

    .progress-bar:after {
      content: "";
      background-color: rgb(66, 195, 247);
      position: absolute;
      border-radius: 10px;
      width: var(--after-width, 0%);
      height: 100%;
      top: 0px;
      left: 0px;
    }
  </style>
  <script>
    function changeWidth() {
      const xhr = new XMLHttpRequest()
      xhr.open('get', '/xxx/abc', true)
      xhr.onload = function (data) {
        if (xhr.status === 200) {
          const data = JSON.parse(xhr.response)
          console.log(data)
          var element = document.getElementById('myElement');
          element.style.setProperty('--after-width', `50%`);
        }
      }
      xhr.send(JSON.stringify({}))
    }
    setInterval(function () {
      // location.reload();
      changeWidth()
    }, 2000)
  </script>
  </div>
</body>

</html>