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