Initial commit

Change-Id: I061d81a33aebadb83ba0e085e8e34339fed5ed53
Issue-ID: SDC-1609
Signed-off-by: Israel Lavi <il0695@att.com>

3 files changed, 265 insertions, 0 deletions

diff --git a/components/loader/_loader.scss b/components/loader/_loader.scss
new file mode 100644
index 0000000..76d6cbb
--- /dev/null
+++ b/components/loader/_loader.scss
@@ -0,0 +1,255 @@
+.sdc-loader-background {
+    background-color: $black;
+    position: absolute;
+    top: 0px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    opacity: 0.5;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.sdc-loader-wrapper{
+    position: relative;
+    width: 100%;
+    height:100%;
+}
+
+.sdc-loader-wrapper-absolute { position: absolute; top: 0;}
+
+.sdc-loader {
+    z-index: 10002;
+}
+
+.sdc-loader-global-wrapper{
+    position:fixed;
+    width: 100%;
+    height:100%;
+}
+
+.loader-fixed {
+    display: block;
+    position:fixed;
+    top:0;
+    left:0;
+    width: 100%;
+    height:100%;
+}
+
+@keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 0.8; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 0.8; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 0.8; }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 0.8; }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 0.8; }
+}
+
+@keyframes fadeout {
+    from { opacity: 0.8; }
+    to   { opacity: 0; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadeout {
+    from { opacity: 0.8; }
+    to   { opacity: 0; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadeout {
+    from { opacity: 0.8; }
+    to   { opacity: 0; }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadeout {
+    from { opacity: 0.8; }
+    to   { opacity: 0; }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes fadeout {
+    from { opacity: 0.8; }
+    to   { opacity: 0; }
+}
+
+.sdc-loader {
+    height: 63px;
+    width: 63px;
+    position: absolute;
+}
+
+.sdc-loader.small {
+    transform: scale(0.26);
+}
+
+.sdc-loader.medium {
+    transform: scale(0.5);
+}
+
+.sdc-loader.large {
+    transform: scale(1);
+}
+
+.sdc-loader::before {
+    background-color: $silver;
+    border-radius: 50%;
+    box-shadow: 21px 21px 0px 0px $silver, 0px 42px 0px 0px $silver, -21px 21px 0px 0px $silver;
+    content: '';
+    display: block;
+    height: 21px;
+    width: 21px;
+    position: absolute;
+    left: 50%;
+    margin-left: -10.5px;
+}
+
+.sdc-loader::after {
+    border-radius: 50%;
+    content: '';
+    display: block;
+    position: absolute;
+    height: 21px;
+    width: 21px;
+    animation: dot-move-2 4.5s infinite ease-in;
+}
+
+@keyframes dot-move {
+    0% {
+        background-color: $light-blue;
+        left: 21px;
+        top: 0;
+    }
+    25% {
+        background-color: $yellow;
+        left: 42px;
+        top: 21px;
+    }
+    50% {
+        background-color: $light-purple;
+        left: 21px;
+        top: 42px;
+    }
+    75% {
+        background-color: $light-yellow;
+        left: 0;
+        top: 21px;
+    }
+    100% {
+        background-color: $light-blue;
+        left: 21px;
+        top: 0;
+    }
+}
+
+@keyframes dot-move-2 {
+    0% {
+        background-color: $light-blue;
+        left: 21px;
+        top: 0;
+    }
+    6.25% {
+        background-color: $light-blue;
+        left: 42px;
+        top: 21px;
+    }
+    12.5% {
+        background-color: $light-blue;
+        left: 21px;
+        top: 42px;
+    }
+    18.75% {
+        background-color: $light-blue;
+        left: 0;
+        top: 21px;
+    }
+    25% {
+        background-color: $yellow;
+        left: 21px;
+        top: 0;
+    }
+    31.25% {
+        background-color: $yellow;
+        left: 42px;
+        top: 21px;
+    }
+    37.5% {
+        background-color: $yellow;
+        left: 21px;
+        top: 42px;
+    }
+    43.75% {
+        background-color: $yellow;
+        left: 0;
+        top: 21px;
+    }
+    50% {
+        background-color: $light-purple;
+        left: 21px;
+        top: 0;
+    }
+    56.25% {
+        background-color: $light-purple;
+        left: 42px;
+        top: 21px;
+    }
+    62.5% {
+        background-color: $light-purple;
+        left: 21px;
+        top: 42px;
+    }
+    68.75% {
+        background-color: $light-purple;
+        left: 0;
+        top: 21px;
+    }
+    75% {
+        background-color: $light-yellow;
+        left: 21px;
+        top: 0;
+    }
+    81.25% {
+        background-color: $light-yellow;
+        left: 42px;
+        top: 21px;
+    }
+    87.5% {
+        background-color: $light-yellow;
+        left: 21px;
+        top: 42px;
+    }
+    93.75% {
+        background-color: $light-yellow;
+        left: 0;
+        top: 21px;
+    }
+    100% {
+        background-color: $light-blue;
+        left: 21px;
+        top: 0;
+    }
+}
diff --git a/components/loader/global-loader.html b/components/loader/global-loader.html
new file mode 100644
index 0000000..2a60b8b
--- /dev/null
+++ b/components/loader/global-loader.html
@@ -0,0 +1,5 @@
+<div>
+    <div class="sdc-loader-global-wrapper sdc-loader-background" >
+    <div class="sdc-loader large"></div>
+    </div>   
+</div>
\ No newline at end of file
diff --git a/components/loader/loader.html b/components/loader/loader.html
new file mode 100644
index 0000000..7ea3348
--- /dev/null
+++ b/components/loader/loader.html
@@ -0,0 +1,5 @@
+<div class = "sdc-loader-wrapper">
+    <div class="sdc-loader-background">
+        <div class="sdc-loader large"></div>
+    </div>
+</div>
\ No newline at end of file