1 files changed, 152 insertions, 0 deletions
diff --git a/public/src/app/loader/loader.component.scss b/public/src/app/loader/loader.component.scss
new file mode 100644
index 0000000..621adba
--- /dev/null
+++ b/public/src/app/loader/loader.component.scss
@@ -0,0 +1,152 @@
+.tlv-loader-block {
+  background-color: #ffffff;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  opacity: 0.5;
+}
+
+.tlv-loader {
+  height: 63px;
+  width: 63px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+
+.tlv-loader.small {
+  -webkit-transform: scale(0.26);
+  transform: scale(0.26);
+  margin-top: -36.5px;
+  margin-left: -36.5px;
+}
+
+.tlv-loader.medium {
+  -webkit-transform: scale(0.5);
+  transform: scale(0.5);
+  margin-top: -26.5px;
+  margin-left: -26.5px;
+}
+
+.tlv-loader.large {
+  -webkit-transform: scale(1);
+  transform: scale(1);
+  margin-top: -10.5px;
+  margin-left: -10.5px;
+}
+
+.tlv-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;
+}
+
+.tlv-loader::after {
+  border-radius: 50%;
+  content: '';
+  display: block;
+  position: absolute;
+  height: 21px;
+  width: 21px;
+  -webkit-animation: dot-move 4.5s infinite ease-in;
+  animation: dot-move 4.5s infinite ease-in;
+}
+
+@keyframes dot-move {
+  0% {
+    background-color: #3bb2df;
+    left: 21px;
+    top: 0;
+  }
+  6.25% {
+    background-color: #3bb2df;
+    left: 42px;
+    top: 21px;
+  }
+  12.5% {
+    background-color: #3bb2df;
+    left: 21px;
+    top: 42px;
+  }
+  18.75% {
+    background-color: #3bb2df;
+    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: #d9e51c;
+    left: 21px;
+    top: 0;
+  }
+  81.25% {
+    background-color: #d9e51c;
+    left: 42px;
+    top: 21px;
+  }
+  87.5% {
+    background-color: #d9e51c;
+    left: 21px;
+    top: 42px;
+  }
+  93.75% {
+    background-color: #d9e51c;
+    left: 0;
+    top: 21px;
+  }
+  100% {
+    background-color: #3bb2df;
+    left: 21px;
+    top: 0;
+  }
+}