added pre-loader template to directives. Added styling for loader animation.
Change-Id: I2f60a4bf8cbf49932b9e736818fcb3a4560af838
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/base/colors.scss b/app/common/styles/base/colors.scss
index 38dd401..6510a6c 100644
--- a/app/common/styles/base/colors.scss
+++ b/app/common/styles/base/colors.scss
@@ -82,8 +82,6 @@
//Inventory
$active: #c6b6f5;
$inactive: $severity-medium-lightbg;
-$present: #b1bef3;
-$not-present: $severity-medium-lightbg;
// Links
$links: #3c6df0;
@@ -95,4 +93,5 @@
$nav__top-level-color: #1a273b;
$nav__second-level-color: #e6e9ed;
-
+//Loader
+$loaderColor: #1d3458;
diff --git a/app/common/styles/elements/index.scss b/app/common/styles/elements/index.scss
index 7b1d1c5..c9e29d9 100644
--- a/app/common/styles/elements/index.scss
+++ b/app/common/styles/elements/index.scss
@@ -6,6 +6,7 @@
@import "alerts";
@import "inline-confirm";
@import "accordion";
+@import "loader";
@import "content-search";
@import "paginate";
@import "thresholds";
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