Move onap UI loader and icons to VID

Issue-ID: VID-748

Change-Id: If79180e55651ad29bd2771a35855209419d1a0f5
Signed-off-by: Yoav Schneiderman <yoav.schneiderman@intl.att.com>

1 files changed, 222 insertions, 0 deletions

diff --git a/vid-webpack-master/src/app/shared/components/customLoader/custom-loader.component.scss b/vid-webpack-master/src/app/shared/components/customLoader/custom-loader.component.scss
new file mode 100644
index 000000000..7572c6e11
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customLoader/custom-loader.component.scss
@@ -0,0 +1,222 @@
+.custom-loader-background {
+  background-color: #000000;
+  position: absolute;
+  z-index: 9999;
+  opacity: 0.5;
+  display: flex;
+  justify-content: center;
+  align-items: center; }
+
+.sdc-loader-wrapper-absolute {
+  position: absolute;
+  top: 0; }
+
+.custom-loader {
+  z-index: 10002; }
+
+.custom-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; } }
+
+.custom-loader {
+  height: 63px;
+  width: 63px;
+  position: absolute; }
+
+.custom-loader.small {
+  transform: scale(0.26); }
+
+.custom-loader.medium {
+  transform: scale(0.5); }
+
+.custom-loader.large {
+  transform: scale(1); }
+
+.custom-loader::before {
+  background-color: #eaeaea;
+  border-radius: 50%;
+  box-shadow: 21px 21px 0px 0px #eaeaea, 0px 42px 0px 0px #eaeaea, -21px 21px 0px 0px #eaeaea;
+  content: '';
+  display: block;
+  height: 21px;
+  width: 21px;
+  position: absolute;
+  left: 50%;
+  margin-left: -10.5px; }
+
+.custom-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: #1eb9f3;
+    left: 21px;
+    top: 0; }
+  25% {
+    background-color: #ffb81c;
+    left: 42px;
+    top: 21px; }
+  50% {
+    background-color: #caa2dd;
+    left: 21px;
+    top: 42px; }
+  75% {
+    background-color: #f6c632;
+    left: 0;
+    top: 21px; }
+  100% {
+    background-color: #1eb9f3;
+    left: 21px;
+    top: 0; } }
+
+@keyframes dot-move-2 {
+  0% {
+    background-color: #1eb9f3;
+    left: 21px;
+    top: 0; }
+  6.25% {
+    background-color: #1eb9f3;
+    left: 42px;
+    top: 21px; }
+  12.5% {
+    background-color: #1eb9f3;
+    left: 21px;
+    top: 42px; }
+  18.75% {
+    background-color: #1eb9f3;
+    left: 0;
+    top: 21px; }
+  25% {
+    background-color: #ffb81c;
+    left: 21px;
+    top: 0; }
+  31.25% {
+    background-color: #ffb81c;
+    left: 42px;
+    top: 21px; }
+  37.5% {
+    background-color: #ffb81c;
+    left: 21px;
+    top: 42px; }
+  43.75% {
+    background-color: #ffb81c;
+    left: 0;
+    top: 21px; }
+  50% {
+    background-color: #caa2dd;
+    left: 21px;
+    top: 0; }
+  56.25% {
+    background-color: #caa2dd;
+    left: 42px;
+    top: 21px; }
+  62.5% {
+    background-color: #caa2dd;
+    left: 21px;
+    top: 42px; }
+  68.75% {
+    background-color: #caa2dd;
+    left: 0;
+    top: 21px; }
+  75% {
+    background-color: #f6c632;
+    left: 21px;
+    top: 0; }
+  81.25% {
+    background-color: #f6c632;
+    left: 42px;
+    top: 21px; }
+  87.5% {
+    background-color: #f6c632;
+    left: 21px;
+    top: 42px; }
+  93.75% {
+    background-color: #f6c632;
+    left: 0;
+    top: 21px; }
+  100% {
+    background-color: #1eb9f3;
+    left: 21px;
+    top: 0; } }