.loader {
    text-align: center;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    background-color: #fff;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.loading-color {
  display: inline-block;
  width: 20px;
  height: 20px;
}

.loading-color:nth-child(1){
  animation: grow 1s ease-in-out infinite, change-color 10s ease-in-out infinite;
}

.loading-color:nth-child(2){
  animation: grow 1s ease-in-out 0.15s infinite, change-color 10s ease-in-out 0.15s infinite;
}

.loading-color:nth-child(3){
  animation: grow 1s ease-in-out 0.30s infinite, change-color 10s ease-in-out 0.25s infinite;
}

.loading-color:nth-child(4){
  animation: grow 1s ease-in-out 0.45s infinite, change-color 10s ease-in-out 0.35s infinite;

}

@keyframes grow{
  0%, 100%{
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    transform: scaleY(1);
  }

  50%{
    -webkit-transform: scaleY(1.8);
    -ms-transform: scaleY(1.8);
    -o-transform: scaleY(1.8);
    transform: scaleY(1.8);
  }
}

@keyframes change-color {
  0%, 100%{
    background: #e6ecff;
  }
  20%{
    background: #9966ff;
  }
  40%{
    background: #ff6666;
  }
  60%{
    background: #ccff66;
  }
  80%{
    background: #66ffcc;
  }
}