master

分支 (3)

标签 (7)

管理

管理

master

gh-pages

vue-cli

2.9.0

2.8.4

v1.0.0

0.4.1

0.4.0

v0.3.4

0.3.3

template-element-ui
/
index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <link rel="icon" href="/favicon.ico">
  <title>Loading</title>
</head>

<body>
  <noscript>
    <strong>We're sorry but blank doesn't work properly without JavaScript enabled. Please enable it to
      continue.</strong>
  </noscript>
  <div id="app">
    <!-- loading -->
    <style>
      .loading {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 999999;
        background: #fff
      }

      #circularG {
        position: absolute;
        ;
        width: 58px;
        height: 58px;
        left: 50%;
        margin-left: -29px;
        top: 50%;
      }

      #circularG:after {
        content: "正在启动";
        position: absolute;
        left: 0;
        top: 115%;
        width: 90%;
        text-align: center;
        font-size: 12px;
      }

      .circularG {
        position: absolute;
        background-color: #ccc;
        width: 14px;
        height: 14px;
        border-radius: 9px;
        -o-border-radius: 9px;
        -ms-border-radius: 9px;
        -webkit-border-radius: 9px;
        -moz-border-radius: 9px;
        animation-name: bounce_circularG;
        -o-animation-name: bounce_circularG;
        -ms-animation-name: bounce_circularG;
        -webkit-animation-name: bounce_circularG;
        -moz-animation-name: bounce_circularG;
        animation-duration: 1.1s;
        -o-animation-duration: 1.1s;
        -ms-animation-duration: 1.1s;
        -webkit-animation-duration: 1.1s;
        -moz-animation-duration: 1.1s;
        animation-iteration-count: infinite;
        -o-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        animation-direction: normal;
        -o-animation-direction: normal;
        -ms-animation-direction: normal;
        -webkit-animation-direction: normal;
        -moz-animation-direction: normal;
      }

      #circularG_1 {
        left: 0;
        top: 23px;
        animation-delay: 0.41s;
        -o-animation-delay: 0.41s;
        -ms-animation-delay: 0.41s;
        -webkit-animation-delay: 0.41s;
        -moz-animation-delay: 0.41s;
      }

      #circularG_2 {
        left: 6px;
        top: 6px;
        animation-delay: 0.55s;
        -o-animation-delay: 0.55s;
        -ms-animation-delay: 0.55s;
        -webkit-animation-delay: 0.55s;
        -moz-animation-delay: 0.55s;
      }

      #circularG_3 {
        top: 0;
        left: 23px;
        animation-delay: 0.69s;
        -o-animation-delay: 0.69s;
        -ms-animation-delay: 0.69s;
        -webkit-animation-delay: 0.69s;
        -moz-animation-delay: 0.69s;
      }

      #circularG_4 {
        right: 6px;
        top: 6px;
        animation-delay: 0.83s;
        -o-animation-delay: 0.83s;
        -ms-animation-delay: 0.83s;
        -webkit-animation-delay: 0.83s;
        -moz-animation-delay: 0.83s;
      }

      #circularG_5 {
        right: 0;
        top: 23px;
        animation-delay: 0.97s;
        -o-animation-delay: 0.97s;
        -ms-animation-delay: 0.97s;
        -webkit-animation-delay: 0.97s;
        -moz-animation-delay: 0.97s;
      }

      #circularG_6 {
        right: 6px;
        bottom: 6px;
        animation-delay: 1.1s;
        -o-animation-delay: 1.1s;
        -ms-animation-delay: 1.1s;
        -webkit-animation-delay: 1.1s;
        -moz-animation-delay: 1.1s;
      }

      #circularG_7 {
        left: 23px;
        bottom: 0;
        animation-delay: 1.24s;
        -o-animation-delay: 1.24s;
        -ms-animation-delay: 1.24s;
        -webkit-animation-delay: 1.24s;
        -moz-animation-delay: 1.24s;
      }

      #circularG_8 {
        left: 6px;
        bottom: 6px;
        animation-delay: 1.38s;
        -o-animation-delay: 1.38s;
        -ms-animation-delay: 1.38s;
        -webkit-animation-delay: 1.38s;
        -moz-animation-delay: 1.38s;
      }


      @keyframes bounce_circularG {
        0% {
          transform: scale(1);
        }

        100% {
          transform: scale(.3);
        }
      }

      @-o-keyframes bounce_circularG {
        0% {
          -o-transform: scale(1);
        }

        100% {
          -o-transform: scale(.3);
        }
      }

      @-ms-keyframes bounce_circularG {
        0% {
          -ms-transform: scale(1);
        }

        100% {
          -ms-transform: scale(.3);
        }
      }

      @-webkit-keyframes bounce_circularG {
        0% {
          -webkit-transform: scale(1);
        }

        100% {
          -webkit-transform: scale(.3);
        }
      }

      @-moz-keyframes bounce_circularG {
        0% {
          -moz-transform: scale(1);
        }

        100% {
          -moz-transform: scale(.3);
        }
      }

      /* 静态资源检测标记 */
      #app::after {
        display: block;
        content: "静态资源失效";
        position: fixed;
        left: 0;
        top: 0;
        z-index: 99999;
        background: #fff;
        color: red;
      }
    </style>
    <div class="loading">
      <div id="circularG">
        <div id="circularG_1" class="circularG"></div>
        <div id="circularG_2" class="circularG"></div>
        <div id="circularG_3" class="circularG"></div>
        <div id="circularG_4" class="circularG"></div>
        <div id="circularG_5" class="circularG"></div>
        <div id="circularG_6" class="circularG"></div>
        <div id="circularG_7" class="circularG"></div>
        <div id="circularG_8" class="circularG"></div>
      </div>
    </div>
  </div>
  <script type="module" src="/src/main.js"></script>
</body>

</html>