openecomp-ui/resources/scss/components/_loader.scss

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