Browse Source

等待页面调整

wang_xy 2 năm trước cách đây
mục cha
commit
750fe2309c
1 tập tin đã thay đổi với 86 bổ sung10 xóa
  1. 86 10
      public/index.html

+ 86 - 10
public/index.html

@@ -7,8 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
   <title><%= webpackConfig.name %></title>
-  <!--[if lt IE 11]>
-  <script>window.location.href = '/html/ie.html';</script><![endif]-->
+  <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
   <style>
     html,
     body,
@@ -17,7 +16,6 @@
       margin: 0px;
       padding: 0px;
     }
-
     .chromeframe {
       margin: 0.2em 0;
       background: #ccc;
@@ -195,13 +193,85 @@
       color: #FFF;
       opacity: 0.5;
     }
+    .loading {
+      width: 40px;
+      height: 40px;
+      margin: 0 auto;
+      position: relative;
+      top: 40%;
+      position: relative;
+      -webkit-animation: load 1.5s linear infinite;
+    }
+
+    .loading div {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+    }
+
+    .loading span {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background: #99CC66;
+      position: absolute;
+      left: 50%;
+      margin-top: -10px;
+      margin-left: -10px;
+      -webkit-animation: changeBgColor 3s ease infinite;
+    }
+
+    @-webkit-keyframes load {
+      0% {
+        -webkit-transform: rotate(0deg);
+      }
+      33.3% {
+        -webkit-transform: rotate(120deg);
+      }
+      66.6% {
+        -webkit-transform: rotate(240deg);
+      }
+      100% {
+        -webkit-transform: rotate(360deg);
+      }
+    }
+
+    @-webkit-keyframes changeBgColor {
+      0%, 100% {
+        background: #2db2cc;
+      }
+      33.3% {
+        background: #FFFF66;
+      }
+      66.6% {
+        background: #FF6666;
+      }
+    }
+
+    .loading div:nth-child(2) {
+      -webkit-transform: rotate(120deg);
+    }
+
+    .loading div:nth-child(3) {
+      -webkit-transform: rotate(240deg);
+    }
+
+    .loading div:nth-child(2) span {
+      -webkit-animation-delay: 1s;
+    }
+
+    .loading div:nth-child(3) span {
+      -webkit-animation-delay: 2s;
+    }
+
   </style>
 </head>
 <body>
 <!--三个必要的js文件引入-->
 <!--<script src="./hk/jquery-1.12.4.min.js"></script>-->
-  <script src="hk/jsencrypt.min.js"></script>            <!-- 用于RSA加密 -->
-  <script src="hk/jsWebControl-1.0.0.min.js"></script>   <!-- 用于前端与插件交互 -->
+<script src="hk/jsencrypt.min.js"></script>            <!-- 用于RSA加密 -->
+<script src="hk/jsWebControl-1.0.0.min.js"></script>   <!-- 用于前端与插件交互 -->
 <!--<script src="h5player/h5player.min.js"></script>-->
 
 
@@ -217,12 +287,18 @@
 <script type="text/javascript" include="PlotPanel,StylePanel,SMLInfosPanel,iPortalStylePanel"
         src="./supermap/examples/js/plottingPanel/PlottingPanel.Include.js"></script>
 <div id="app">
-  <div id="loader-wrapper">
-    <div id="loader"></div>
-    <div class="loader-section section-left"></div>
-    <div class="loader-section section-right"></div>
-    <div class="load_title">正在加载系统资源,请耐心等待</div>
+  <div class="loading">
+    <div><span></span></div>
+    <div><span></span></div>
+    <div><span></span></div>
   </div>
+  <div style="top: 48%; position: absolute; left: 50%; transform: translateX(-50%);">正在努力加载中,请稍候...</div>
+  <!--<div id="loader-wrapper">-->
+  <!--<div id="loader"></div>-->
+  <!--<div class="loader-section section-left"></div>-->
+  <!--<div class="loader-section section-right"></div>-->
+  <!--<div class="load_title">正在加载系统资源,请耐心等待</div>-->
+  <!--</div>-->
 </div>
 </body>
 </html>