.loading-wrap {
  align-items: center;
  display: flex;
  position: fixed;
  user-select: none;
  justify-content: center;        
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.loading-dot,
.loading-dot::before,
.loading-dot::after {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ffe799;
  color: #ffe799;
  animation: loading-dot-flashing 1s infinite linear alternate;
}
.loading-dot {
  position: relative;        
  animation-delay: 0.5s;
  top: 0;
  left: 0;
}
.loading-dot::before,
.loading-dot::after {
  position: absolute;
  content: '';
  display: inline-block;
  top: 0;
}
.loading-dot::before {
  left: -15px;        
  animation-delay: 0s;
}
.loading-dot::after {
  left: 15px;        
  animation-delay: 1s;
}
@keyframes loading-dot-flashing {
  0% {
    background-color: #ffe799;
  }
  50%,100% {
    background-color: #ffc400;
  }
}