#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 120px;
  height: 120px;
  margin: -76px 0 0 -76px;
  border: 16px solid #fcfaf5;
  border-radius: 50%;
  border-top: 16px solid #f2e099;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}
@-webkit-keyframes animatebottom {
  from { bottom:-500px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}
@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}
#myDiv {
  display: none;
}
#whatsloading {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3vw;
  z-index: 1001;
  color: black;
  font-weight: normal;
}
#progressBar {
  /* --- Positioning and Size --- */
  position: fixed;
  bottom: 15%;
  left: 5%;
  width: 90%;
  height: 12px;
  z-index: 1000;
  background-color: #fcfaf5;
  background-image: linear-gradient(to right, #f2e099, #f2e099);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.5s ease-out;
}
#loader-img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 120px;
  height: 120px;
}