vid-webpack-master/src/app/shared/components/customLoader/custom-loader.component.scss

   1 .custom-loader-background {
   2   background-color: #000000;
   3   position: absolute;
   4   z-index: 9999;
   5   opacity: 0.5;
   6   display: flex;
   7   justify-content: center;
   8   align-items: center; }
   9
  10 .sdc-loader-wrapper-absolute {
  11   position: absolute;
  12   top: 0; }
  13
  14 .custom-loader {
  15   z-index: 10002; }
  16
  17 .custom-loader-global-wrapper {
  18   position: fixed;
  19   width: 100%;
  20   height: 100%; }
  21
  22 .loader-fixed {
  23   display: block;
  24   position: fixed;
  25   top: 0;
  26   left: 0;
  27   width: 100%;
  28   height: 100%; }
  29 @keyframes fadein {
  30   from {
  31     opacity: 0; }
  32   to {
  33     opacity: 0.8; } }
  34
  35 /* Firefox < 16 */
  36 @-moz-keyframes fadein {
  37   from {
  38     opacity: 0; }
  39   to {
  40     opacity: 0.8; } }
  41
  42 /* Safari, Chrome and Opera > 12.1 */
  43 @-webkit-keyframes fadein {
  44   from {
  45     opacity: 0; }
  46   to {
  47     opacity: 0.8; } }
  48
  49 /* Internet Explorer */
  50 @-ms-keyframes fadein {
  51   from {
  52     opacity: 0; }
  53   to {
  54     opacity: 0.8; } }
  55
  56 /* Opera < 12.1 */
  57 @-o-keyframes fadein {
  58   from {
  59     opacity: 0; }
  60   to {
  61     opacity: 0.8; } }
  62
  63 @keyframes fadeout {
  64   from {
  65     opacity: 0.8; }
  66   to {
  67     opacity: 0; } }
  68
  69 /* Firefox < 16 */
  70 @-moz-keyframes fadeout {
  71   from {
  72     opacity: 0.8; }
  73   to {
  74     opacity: 0; } }
  75
  76 /* Safari, Chrome and Opera > 12.1 */
  77 @-webkit-keyframes fadeout {
  78   from {
  79     opacity: 0.8; }
  80   to {
  81     opacity: 0; } }
  82
  83 /* Internet Explorer */
  84 @-ms-keyframes fadeout {
  85   from {
  86     opacity: 0.8; }
  87   to {
  88     opacity: 0; } }
  89
  90 /* Opera < 12.1 */
  91 @-o-keyframes fadeout {
  92   from {
  93     opacity: 0.8; }
  94   to {
  95     opacity: 0; } }
  96
  97 .custom-loader {
  98   height: 63px;
  99   width: 63px;
 100   position: absolute; }
 101
 102 .custom-loader.small {
 103   transform: scale(0.26); }
 104
 105 .custom-loader.medium {
 106   transform: scale(0.5); }
 107
 108 .custom-loader.large {
 109   transform: scale(1); }
 110
 111 .custom-loader::before {
 112   background-color: #eaeaea;
 113   border-radius: 50%;
 114   box-shadow: 21px 21px 0px 0px #eaeaea, 0px 42px 0px 0px #eaeaea, -21px 21px 0px 0px #eaeaea;
 115   content: '';
 116   display: block;
 117   height: 21px;
 118   width: 21px;
 119   position: absolute;
 120   left: 50%;
 121   margin-left: -10.5px; }
 122
 123 .custom-loader::after {
 124   border-radius: 50%;
 125   content: '';
 126   display: block;
 127   position: absolute;
 128   height: 21px;
 129   width: 21px;
 130   animation: dot-move-2 4.5s infinite ease-in; }
 131
 132 @keyframes dot-move {
 133   0% {
 134     background-color: #1eb9f3;
 135     left: 21px;
 136     top: 0; }
 137   25% {
 138     background-color: #ffb81c;
 139     left: 42px;
 140     top: 21px; }
 141   50% {
 142     background-color: #caa2dd;
 143     left: 21px;
 144     top: 42px; }
 145   75% {
 146     background-color: #f6c632;
 147     left: 0;
 148     top: 21px; }
 149   100% {
 150     background-color: #1eb9f3;
 151     left: 21px;
 152     top: 0; } }
 153
 154 @keyframes dot-move-2 {
 155   0% {
 156     background-color: #1eb9f3;
 157     left: 21px;
 158     top: 0; }
 159   6.25% {
 160     background-color: #1eb9f3;
 161     left: 42px;
 162     top: 21px; }
 163   12.5% {
 164     background-color: #1eb9f3;
 165     left: 21px;
 166     top: 42px; }
 167   18.75% {
 168     background-color: #1eb9f3;
 169     left: 0;
 170     top: 21px; }
 171   25% {
 172     background-color: #ffb81c;
 173     left: 21px;
 174     top: 0; }
 175   31.25% {
 176     background-color: #ffb81c;
 177     left: 42px;
 178     top: 21px; }
 179   37.5% {
 180     background-color: #ffb81c;
 181     left: 21px;
 182     top: 42px; }
 183   43.75% {
 184     background-color: #ffb81c;
 185     left: 0;
 186     top: 21px; }
 187   50% {
 188     background-color: #caa2dd;
 189     left: 21px;
 190     top: 0; }
 191   56.25% {
 192     background-color: #caa2dd;
 193     left: 42px;
 194     top: 21px; }
 195   62.5% {
 196     background-color: #caa2dd;
 197     left: 21px;
 198     top: 42px; }
 199   68.75% {
 200     background-color: #caa2dd;
 201     left: 0;
 202     top: 21px; }
 203   75% {
 204     background-color: #f6c632;
 205     left: 21px;
 206     top: 0; }
 207   81.25% {
 208     background-color: #f6c632;
 209     left: 42px;
 210     top: 21px; }
 211   87.5% {
 212     background-color: #f6c632;
 213     left: 21px;
 214     top: 42px; }
 215   93.75% {
 216     background-color: #f6c632;
 217     left: 0;
 218     top: 21px; }
 219   100% {
 220     background-color: #1eb9f3;
 221     left: 21px;
 222     top: 0; } }