catalog-ui/src/assets/styles/tlv-loader.less

   1 .tlv-loader {
   2     height: 63px;
   3     width: 63px;
   4     position: absolute;
   5     top: 50%;
   6     left: 50%;
   7 }
   8
   9 .tlv-loader.small {
  10     transform: scale(0.26);
  11     margin-top: -36.5px;
  12     margin-left: -36.5px;
  13 }
  14
  15 .tlv-loader.medium {
  16     transform: scale(0.5);
  17     margin-top: -26.5px;
  18     margin-left: -26.5px;
  19 }
  20
  21 .tlv-loader.large {
  22     transform: scale(1);
  23     margin-top: -10.5px;
  24     margin-left: -10.5px;
  25 }
  26
  27 .tlv-loader::before {
  28     background-color: #eaeaea;
  29     border-radius: 50%;
  30     box-shadow: 21px 21px 0px 0px #eaeaea, 0px 42px 0px 0px #eaeaea, -21px 21px 0px 0px #eaeaea;
  31     content: '';
  32     display: block;
  33     height: 21px;
  34     width: 21px;
  35     position: absolute;
  36     left: 50%;
  37     margin-left: -10.5px;
  38 }
  39
  40 .tlv-loader::after {
  41     border-radius: 50%;
  42     content: '';
  43     display: block;
  44     position: absolute;
  45     height: 21px;
  46     width: 21px;
  47     animation: dot-move-2 4.5s infinite ease-in;
  48 }
  49
  50 @keyframes dot-move {
  51     0% {
  52         background-color: #3bb2df;
  53         left: 21px;
  54         top: 0;
  55     }
  56     25% {
  57         background-color: #ffb81c;
  58         left: 42px;
  59         top: 21px;
  60     }
  61     50% {
  62         background-color: #caa2dd;
  63         left: 21px;
  64         top: 42px;
  65     }
  66     75% {
  67         background-color: #d9e51c;
  68         left: 0;
  69         top: 21px;
  70     }
  71     100% {
  72         background-color: #3bb2df;
  73         left: 21px;
  74         top: 0;
  75     }
  76 }
  77
  78 @keyframes dot-move-2 {
  79     0% {
  80         background-color: #3bb2df;
  81         left: 21px;
  82         top: 0;
  83     }
  84     6.25% {
  85         background-color: #3bb2df;
  86         left: 42px;
  87         top: 21px;
  88     }
  89     12.5% {
  90         background-color: #3bb2df;
  91         left: 21px;
  92         top: 42px;
  93     }
  94     18.75% {
  95         background-color: #3bb2df;
  96         left: 0;
  97         top: 21px;
  98     }
  99     25% {
 100         background-color: #ffb81c;
 101         left: 21px;
 102         top: 0;
 103     }
 104     31.25% {
 105         background-color: #ffb81c;
 106         left: 42px;
 107         top: 21px;
 108     }
 109     37.5% {
 110         background-color: #ffb81c;
 111         left: 21px;
 112         top: 42px;
 113     }
 114     43.75% {
 115         background-color: #ffb81c;
 116         left: 0;
 117         top: 21px;
 118     }
 119     50% {
 120         background-color: #caa2dd;
 121         left: 21px;
 122         top: 0;
 123     }
 124     56.25% {
 125         background-color: #caa2dd;
 126         left: 42px;
 127         top: 21px;
 128     }
 129     62.5% {
 130         background-color: #caa2dd;
 131         left: 21px;
 132         top: 42px;
 133     }
 134     68.75% {
 135         background-color: #caa2dd;
 136         left: 0;
 137         top: 21px;
 138     }
 139     75% {
 140         background-color: #d9e51c;
 141         left: 21px;
 142         top: 0;
 143     }
 144     81.25% {
 145         background-color: #d9e51c;
 146         left: 42px;
 147         top: 21px;
 148     }
 149     87.5% {
 150         background-color: #d9e51c;
 151         left: 21px;
 152         top: 42px;
 153     }
 154     93.75% {
 155         background-color: #d9e51c;
 156         left: 0;
 157         top: 21px;
 158     }
 159     100% {
 160         background-color: #3bb2df;
 161         left: 21px;
 162         top: 0;
 163     }
 164 }