client/src/app/shared/shared-main/loaders/loader.component.scss

   1 @use '_variables';
   2 @use '_mixins';
   3
   4 // Thanks to https://loading.io/css/ (CC0 License)
   5
   6 .loader {
   7   display: inline-block;
   8   position: relative;
   9   width: 50px;
  10   height: 50px;
  11 }
  12
  13 .loader div {
  14   box-sizing: border-box;
  15   display: block;
  16   position: absolute;
  17   width: 44px;
  18   height: 44px;
  19   margin: 6px;
  20   border: 4px solid;
  21   border-radius: 50%;
  22   animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  23   border-color: #999999 transparent transparent;
  24 }
  25
  26 .loader div:nth-child(1) {
  27   animation-delay: -0.45s;
  28 }
  29
  30 .loader div:nth-child(2) {
  31   animation-delay: -0.3s;
  32 }
  33
  34 .loader div:nth-child(3) {
  35   animation-delay: -0.15s;
  36 }
  37
  38 @keyframes loader {
  39   0% {
  40     transform: rotate(0deg);
  41   }
  42   100% {
  43     transform: rotate(360deg);
  44   }
  45 }