.loading {
  position: fixed;
  left: 50%;
  top: 50%;
  height: 50px;   
  transform: translate(-50%, -50%);
  display: flex; 
  justify-content: center; 
  align-items: center;
  z-index: 9999;
}
.loading-container {
  width: 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.loadingdot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #87ceeb;
}
@keyframes pulse {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: .25;
    transform: scale(.75);
  }
}
.loading-dot-1 {
    animation: pulse .4s ease 0s infinite alternate;
}
.loading-dot-2 {
    animation: pulse .4s ease .2s infinite alternate;
}
.loading-dot-3 {
    animation: pulse .4s ease .4s infinite alternate;
}