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/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