workflow-designer-ui/src/main/frontend/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       z-index: 99999;
  11     }
  12     .tlv-loader {
  13       height: 63px;
  14       width: 63px;
  15       position: absolute;
  16       top: 30%;
  17       left: 50%;
  18       margin-top: -10.5px;
  19       margin-left: -10.5px;
  20     }
  21     .tlv-loader.large {
  22       transform: scale(1);
  23     }
  24     .tlv-loader::before {
  25       background-color: $gray;
  26       border-radius: 50%;
  27       box-shadow: 21px 21px 0px 0px $gray, 0px 42px 0px 0px $gray, -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: $yellow;
  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: $yellow;
  95         left: 21px;
  96         top: 0;
  97       }
  98       31.25% {
  99         background-color: $yellow;
 100         left: 42px;
 101         top: 21px;
 102       }
 103       37.5% {
 104         background-color: $yellow;
 105         left: 21px;
 106         top: 42px;
 107       }
 108       43.75% {
 109         background-color: $yellow;
 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   }