aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/assets/styles/tlv-loader.less
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/assets/styles/tlv-loader.less')
-rw-r--r--catalog-ui/src/assets/styles/tlv-loader.less164
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;
+ }
+}