只需要复制以下代码，覆盖到你的index.html中即可：

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7.   <title>loading</title>
  8.   <style>
  9.     html,
  10.     body,
  11.     #app {
  12.       height: 100%;
  13.       margin: 0px;
  14.       padding: 0px;
  15.     }
  16.     .chromeframe {
  17.       margin: 0.2em 0;
  18.       background: #ccc;
  19.       color: #000;
  20.       padding: 0.2em 0;
  21.     }
  22.     #loader-wrapper {
  23.       position: fixed;
  24.       top: 0;
  25.       left: 0;
  26.       width: 100%;
  27.       height: 100%;
  28.       z-index: 999999;
  29.     }
  30.     #loader {
  31.       display: block;
  32.       position: relative;
  33.       left: 50%;
  34.       top: 50%;
  35.       width: 150px;
  36.       height: 150px;
  37.       margin: -75px 0 0 -75px;
  38.       border-radius: 50%;
  39.       border: 3px solid transparent;
  40.       /* COLOR 1 */
  41.       border-top-color: #FFF;
  42.       -webkit-animation: spin 2s linear infinite;
  43.       /* Chrome, Opera 15+, Safari 5+ */
  44.       -ms-animation: spin 2s linear infinite;
  45.       /* Chrome, Opera 15+, Safari 5+ */
  46.       -moz-animation: spin 2s linear infinite;
  47.       /* Chrome, Opera 15+, Safari 5+ */
  48.       -o-animation: spin 2s linear infinite;
  49.       /* Chrome, Opera 15+, Safari 5+ */
  50.       animation: spin 2s linear infinite;
  51.       /* Chrome, Firefox 16+, IE 10+, Opera */
  52.       z-index: 1001;
  53.     }
  54.     #loader:before {
  55.       content: "";
  56.       position: absolute;
  57.       top: 5px;
  58.       left: 5px;
  59.       right: 5px;
  60.       bottom: 5px;
  61.       border-radius: 50%;
  62.       border: 3px solid transparent;
  63.       /* COLOR 2 */
  64.       border-top-color: #FFF;
  65.       -webkit-animation: spin 3s linear infinite;
  66.       /* Chrome, Opera 15+, Safari 5+ */
  67.       -moz-animation: spin 3s linear infinite;
  68.       /* Chrome, Opera 15+, Safari 5+ */
  69.       -o-animation: spin 3s linear infinite;
  70.       /* Chrome, Opera 15+, Safari 5+ */
  71.       -ms-animation: spin 3s linear infinite;
  72.       /* Chrome, Opera 15+, Safari 5+ */
  73.       animation: spin 3s linear infinite;
  74.       /* Chrome, Firefox 16+, IE 10+, Opera */
  75.     }
  76.     #loader:after {
  77.       content: "";
  78.       position: absolute;
  79.       top: 15px;
  80.       left: 15px;
  81.       right: 15px;
  82.       bottom: 15px;
  83.       border-radius: 50%;
  84.       border: 3px solid transparent;
  85.       border-top-color: #FFF;
  86.       /* COLOR 3 */
  87.       -moz-animation: spin 1.5s linear infinite;
  88.       /* Chrome, Opera 15+, Safari 5+ */
  89.       -o-animation: spin 1.5s linear infinite;
  90.       /* Chrome, Opera 15+, Safari 5+ */
  91.       -ms-animation: spin 1.5s linear infinite;
  92.       /* Chrome, Opera 15+, Safari 5+ */
  93.       -webkit-animation: spin 1.5s linear infinite;
  94.       /* Chrome, Opera 15+, Safari 5+ */
  95.       animation: spin 1.5s linear infinite;
  96.       /* Chrome, Firefox 16+, IE 10+, Opera */
  97.     }
  98.     @-webkit-keyframes spin {
  99.       0% {
  100.         -webkit-transform: rotate(0deg);
  101.         /* Chrome, Opera 15+, Safari 3.1+ */
  102.         -ms-transform: rotate(0deg);
  103.         /* IE 9 */
  104.         transform: rotate(0deg);
  105.         /* Firefox 16+, IE 10+, Opera */
  106.       }
  107.       100% {
  108.         -webkit-transform: rotate(360deg);
  109.         /* Chrome, Opera 15+, Safari 3.1+ */
  110.         -ms-transform: rotate(360deg);
  111.         /* IE 9 */
  112.         transform: rotate(360deg);
  113.         /* Firefox 16+, IE 10+, Opera */
  114.       }
  115.     }
  116.     @keyframes spin {
  117.       0% {
  118.         -webkit-transform: rotate(0deg);
  119.         /* Chrome, Opera 15+, Safari 3.1+ */
  120.         -ms-transform: rotate(0deg);
  121.         /* IE 9 */
  122.         transform: rotate(0deg);
  123.         /* Firefox 16+, IE 10+, Opera */
  124.       }
  125.       100% {
  126.         -webkit-transform: rotate(360deg);
  127.         /* Chrome, Opera 15+, Safari 3.1+ */
  128.         -ms-transform: rotate(360deg);
  129.         /* IE 9 */
  130.         transform: rotate(360deg);
  131.         /* Firefox 16+, IE 10+, Opera */
  132.       }
  133.     }
  134.     #loader-wrapper .loader-section {
  135.       position: fixed;
  136.       top: 0;
  137.       width: 51%;
  138.       height: 100%;
  139.       background: #1ABC9C;
  140.       /* Old browsers */
  141.       z-index: 1000;
  142.       -webkit-transform: translateX(0);
  143.       /* Chrome, Opera 15+, Safari 3.1+ */
  144.       -ms-transform: translateX(0);
  145.       /* IE 9 */
  146.       transform: translateX(0);
  147.       /* Firefox 16+, IE 10+, Opera */
  148.     }
  149.     #loader-wrapper .loader-section.section-left {
  150.       left: 0;
  151.     }
  152.     #loader-wrapper .loader-section.section-right {
  153.       right: 0;
  154.     }
  155.     /* Loaded */
  156.     .loaded #loader-wrapper .loader-section.section-left {
  157.       -webkit-transform: translateX(-100%);
  158.       /* Chrome, Opera 15+, Safari 3.1+ */
  159.       -ms-transform: translateX(-100%);
  160.       /* IE 9 */
  161.       transform: translateX(-100%);
  162.       /* Firefox 16+, IE 10+, Opera */
  163.       -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  164.       transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  165.     }
  166.     .loaded #loader-wrapper .loader-section.section-right {
  167.       -webkit-transform: translateX(100%);
  168.       /* Chrome, Opera 15+, Safari 3.1+ */
  169.       -ms-transform: translateX(100%);
  170.       /* IE 9 */
  171.       transform: translateX(100%);
  172.       /* Firefox 16+, IE 10+, Opera */
  173.       -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  174.       transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  175.     }
  176.     .loaded #loader {
  177.       opacity: 0;
  178.       -webkit-transition: all 0.3s ease-out;
  179.       transition: all 0.3s ease-out;
  180.     }
  181.     .loaded #loader-wrapper {
  182.       visibility: hidden;
  183.       -webkit-transform: translateY(-100%);
  184.       /* Chrome, Opera 15+, Safari 3.1+ */
  185.       -ms-transform: translateY(-100%);
  186.       /* IE 9 */
  187.       transform: translateY(-100%);
  188.       /* Firefox 16+, IE 10+, Opera */
  189.       -webkit-transition: all 0.3s 1s ease-out;
  190.       transition: all 0.3s 1s ease-out;
  191.     }
  192.     /* JavaScript Turned Off */
  193.     .no-js #loader-wrapper {
  194.       display: none;
  195.     }
  196.     .no-js h1 {
  197.       color: #222222;
  198.     }
  199.     #loader-wrapper .load_title {
  200.       font-family: 'Open Sans';
  201.       color: #FFF;
  202.       font-size: 19px;
  203.       width: 100%;
  204.       text-align: center;
  205.       z-index: 9999999999999;
  206.       position: absolute;
  207.       top: 60%;
  208.       opacity: 1;
  209.       line-height: 30px;
  210.     }
  211.     #loader-wrapper .load_title span {
  212.       font-weight: normal;
  213.       font-style: italic;
  214.       font-size: 13px;
  215.       color: #FFF;
  216.       opacity: 0.5;
  217.     }
  218.   </style>
  219. </head>
  221. <body>
  222.   <!-- built files will be auto injected -->
  223.   <div id="app">
  224.     <div id="loader-wrapper">
  225.       <div id="loader"></div>
  226.       <div class="loader-section section-left"></div>
  227.       <div class="loader-section section-right"></div>
  228.       <div class="load_title">正在加载中...
  229.         <br>
  230.         <span>V1.0.1</span>
  231.       </div>
  232.     </div>
  233.   </div>
  234. </body>
  236. </html>