1 files changed, 164 insertions, 0 deletions
diff --git a/catalog-ui/src/assets/styles/tlv-loader.less b/catalog-ui/src/assets/styles/tlv-loader.less
new file mode 100644
index 0000000000..efe39916e2
--- /dev/null
+++ b/catalog-ui/src/assets/styles/tlv-loader.less
@@ -0,0 +1,164 @@
+.tlv-loader {
+    height: 63px;
+    width: 63px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+}
+
+.tlv-loader.small {
+    transform: scale(0.26);
+    margin-top: -36.5px;
+    margin-left: -36.5px;
+}
+
+.tlv-loader.medium {
+    transform: scale(0.5);
+    margin-top: -26.5px;
+    margin-left: -26.5px;
+}
+
+.tlv-loader.large {
+    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;
+    animation: dot-move-2 4.5s infinite ease-in;
+}
+
+@keyframes dot-move {
+    0% {
+        background-color: #3bb2df;
+        left: 21px;
+        top: 0;
+    }
+    25% {
+        background-color: #ffb81c;
+        left: 42px;
+        top: 21px;
+    }
+    50% {
+        background-color: #caa2dd;
+        left: 21px;
+        top: 42px;
+    }
+    75% {
+        background-color: #d9e51c;
+        left: 0;
+        top: 21px;
+    }
+    100% {
+        background-color: #3bb2df;
+        left: 21px;
+        top: 0;
+    }
+}
+
+@keyframes dot-move-2 {
+    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;
+    }
+}