.loader{
    background-color: #e8e8e8;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    transition: all 0.5s ease;
}


.item1, .item2, .item3 {
    position: absolute;
    background-color: transparent;
    left: calc(50% - (var(--size) / 2));
    top: calc(50% - (var(--size) / 2));
    height: var(--size);
    width: var(--size);
    border-radius: 50%;
  }
  
  .loader .item1 {
    --size: 25rem;
    animation: size1_1 1s infinite alternate;
    z-index: 1;
  }
  
  .loader .item2 {
    --size: 20rem;
    animation: size1_2 1s infinite alternate;
    z-index: 2;
  }
  
  .loader .item3 {
    --size: 15rem;
    animation: size1_3 1s infinite alternate;
    z-index: 3;
  }
  
  @keyframes size1_1 {
    0%,
    10% {
      transform: scale(0);
    }
  
    100% {
      transform: scale(1);
      box-shadow: 8px 8px 14px #c5c5c5, -8px -8px 14px #ffffff;
    }
  }
  
  @keyframes size1_2 {
    0%,
    40% {
      transform: scale(0);
    }
  
    100% {
      transform: scale(1);
      box-shadow: 8px 8px 14px #c5c5c5, -8px -8px 14px #ffffff;
    }
  }
  
  @keyframes size1_3 {
    0%,
    70% {
      transform: scale(0);
    }
  
    100% {
      transform: scale(1);
      box-shadow: 8px 8px 14px #c5c5c5, -8px -8px 14px #ffffff;
    }
  }