feat(css) add loading css (#6066)

* feat(css) add loading css
centreon · Feb 16, 2018 · d315578 · d315578
1 parent 40f1389
commit d315578
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 0 deletions.
diff --git a/www/Themes/Centreon-2/centreon-loading.css b/www/Themes/Centreon-2/centreon-loading.css
@@ -0,0 +1,99 @@
+/******* Loading containers **********/
+
+.loadingWrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: rgba(255,255,255,0.5);
+  width: 100%;
+  height: 100%;
+  transition: all ease 0.6s;
+}
+
+.waiting {
+  position: relative;
+  height: 100%;
+  text-align: center;
+}
+
+.loading-container {
+  position: absolute;
+  width: 100%;
+  top: 40%
+}
+
+@keyframes green1 {
+  from {
+    fill: #83c249;}
+  to {fill: #ccf289;}
+}
+
+@keyframes green2 {
+  from {fill: #34b24f;}
+  to {fill: #93e888;}
+}
+
+@keyframes green3 {
+  from {fill: #00ac9f;}
+  to {fill: #4fd6ca;}
+}
+
+@keyframes blue1 {
+  from {fill: #00aeec;}
+  to {fill: #7bd0fa;}
+}
+
+@keyframes blue2 {
+  from {fill: #0078bb;}
+  to {fill: #60a6d7;}
+}
+
+@keyframes blue3 {
+  from {fill: #29378e;}
+  to {fill: #5375bd;}
+}
+
+.color {
+
+  animation-duration: .3s;
+  animation-direction: alternate;
+  //webkit-animation-direction: alternate;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+.color-1 {
+  fill: #83c249;
+  animation-name: green1;
+  animation-delay: 0s;
+}
+
+.color-2 {
+  fill: #34b24f;
+  animation-name: green2;
+  animation-delay: .5s;
+
+}
+
+.color-3 {
+  fill: #00ac9f;
+  animation-name: green3;
+  animation-delay: 1s;
+}
+
+.color-4 {
+  fill: #00aeec;
+  animation-name: blue1;
+  animation-delay: 1.5s;
+}
+
+.color-5 {
+  fill: #0078bb;
+  animation-name: blue2;
+  animation-delay: 2s;
+}
+.color-6 {
+  fill: #29378e;
+  animation-name: blue3;
+  animation-delay: 2.5s;
+}
diff --git a/www/include/core/header/htmlHeader.php b/www/include/core/header/htmlHeader.php
@@ -52,6 +52,7 @@
 
     <link href="./include/common/javascript/jquery/plugins/jpaginator/jPaginator.css" rel="stylesheet" type="text/css"/>
     <link href="./Themes/Centreon-2/style.css" rel="stylesheet" type="text/css"/>
+    <link href="./Themes/Centreon-2/centreon-loading.css" rel="stylesheet" type="text/css"/>
     <link href="./Themes/Centreon-2/responsive-style.css" rel="stylesheet" type="text/css"/>
     <link href="./Themes/Centreon-2/<?php echo $colorfile; ?>" rel="stylesheet" type="text/css"/>
     <link href="./include/common/javascript/jquery/plugins/timepicker/jquery.ui.timepicker.css" rel="stylesheet"