Просмотр исходного кода

added a loading view with a spining grafana logo

Patrick O'Carroll 7 лет назад
Родитель
Сommit
5ff5c5c245
1 измененных файлов с 18 добавлено и 3 удалено
  1. 18 3
      public/views/index.template.html

+ 18 - 3
public/views/index.template.html

@@ -20,10 +20,25 @@
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <meta name="msapplication-TileColor" content="#2b5797">
   <meta name="msapplication-TileColor" content="#2b5797">
   <meta name="msapplication-config" content="public/img/browserconfig.xml">
   <meta name="msapplication-config" content="public/img/browserconfig.xml">
+  <style>
+    @keyframes rotate-icon {from {transform: rotateZ(0deg);}to {transform: rotateZ(360deg);}}
+    .rotating-logo {
+    animation-name: rotate-icon;
+    animation-duration: 1.1s;
+    animation-iteration-count: infinite;
+    animation-timing-function: cubic-bezier(0.4, 0.35, 0.5, 0.55)
+    }
+  </style>
 </head>
 </head>
 
 
-<body ng-cloak class="theme-[[ .Theme ]]">
-  <grafana-app class="grafana-app">
+<body  class="theme-[[ .Theme ]]">
+  <div class="page-loader" style="display: flex; align-items: center; justify-content: center; height: 100%; flex-direction: column">
+    <div class="rotating-logo">
+      <img src="public/img/grafana_icon.svg" style="width: 60px">
+    </div>
+    <div style="margin-top: 14px">LOADING GRAFANA</div>
+  </div>
+  <grafana-app class="grafana-app" ng-cloak>
 
 
     <sidemenu class="sidemenu"></sidemenu>
     <sidemenu class="sidemenu"></sidemenu>
 
 
@@ -115,4 +130,4 @@
 
 
 </body>
 </body>
 
 
-</html>
+</html>