added pre-loader template to directives. Added styling for loader animation.
Change-Id: I38f523363c2328d9b7856d98f0c3f5c5318d714d
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/common/directives/loader.html b/app/common/directives/loader.html
new file mode 100644
index 0000000..65f818b
--- /dev/null
+++ b/app/common/directives/loader.html
@@ -0,0 +1,3 @@
+<div class="loader__wrapper"><svg class="loader" viewBox="25 25 50 50">
+ <circle class="loader__path" cx="50" cy="50" r="20"/></circle>
+</svg></div>
\ No newline at end of file
diff --git a/app/common/styles/elements/loader.scss b/app/common/styles/elements/loader.scss
new file mode 100644
index 0000000..a711e04
--- /dev/null
+++ b/app/common/styles/elements/loader.scss
@@ -0,0 +1,40 @@
+// Loader
+
+@keyframes rotate {
+ 0% { transform: rotate(0deg);}
+ 100% { transform: rotate(360deg);}
+}
+
+.loader__wrapper {
+ width: 115px;
+ height: 115px;
+ position: relative;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ margin: 3em 0;
+}
+
+.loader{
+ width:100%;
+ height:100%;
+ transform: translateZ(0) rotate(360deg);
+ transform-origin: center center;
+ -moz-transform-origin: 50px 50px; /* firefox requires fixed values */
+ animation: rotate 1s linear infinite;
+}
+
+.loader__path{
+ stroke-dasharray: 80px;
+ stroke-dashoffset: 9.7px;
+ r: 16px;
+ cx: 50px;
+ cy: 50px;
+ fill: transparent;
+ stroke: $loaderColor;
+ stroke-width: 5px;
+ stroke-linecap: round;
+ transition: stroke-dashoffset 1s cubic-bezier(.5,.08,0,1);
+ -webkit-animation: a 4s ease-out infinite;
+ animation: a 4s ease-out infinite;
+}
\ No newline at end of file
diff --git a/app/server-health/controllers/log-controller.html b/app/server-health/controllers/log-controller.html
index e9af295..147295e 100644
--- a/app/server-health/controllers/log-controller.html
+++ b/app/server-health/controllers/log-controller.html
@@ -27,6 +27,7 @@
<!-- filters -->
<log-filter></log-filter>
</section> <!-- end filter -->
+
<section id="event-log__events" class="row column">
<div id="event__actions-bar" class="row header__actions-bar no-margin">
<div class="column small-1 large-1 event-log__col-check">
diff --git a/app/server-health/styles/log.scss b/app/server-health/styles/log.scss
index 8d93f07..da7eba1 100644
--- a/app/server-health/styles/log.scss
+++ b/app/server-health/styles/log.scss
@@ -93,6 +93,12 @@
padding-right: 0;
}
+.accord-trigger {
+ position: absolute;
+ right: 1em;
+ top: .3em;
+}
+
#event-log__events,
.event-log__events {
display: block;
@@ -190,11 +196,6 @@
background-color: $lightgrey;
@include slowTransition-all;
}
- .accord-trigger {
- position: absolute;
- right: 1em;
- top: .3em;
- }
}
.event-log__event-info {
&:hover {
@@ -279,7 +280,7 @@
.event__timestamp {
@include fontCourierBold;
font-size: .9em;
- color: #999999;
+ color: $darkgrey;
@media (min-width: 1105px ) {
float: right;
}