html, body {
  position: fixed;
	top: 0;
	right:0;
	bottom:0;
	left: 0;
	overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

/* Config */
:root {
  --sk-size: 140px;
  --sk-color: #fff;
}

/* Utility class for centering */
.sk-center { margin: auto; }

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/*  Bounce

      <div class="sk-bounce">
        <div class="sk-bounce-dot"></div>
        <div class="sk-bounce-dot"></div>
      </div>
  */
.sk-bounce {
  width: var(--sk-size);
  height: var(--sk-size);
  position: relative;
}

.sk-bounce-dot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--sk-color);
  opacity: 1.0;
  position: absolute;
  top: 0;
  left: 0;
  animation: sk-bounce 1.0s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); 
}

.sk-bounce-dot2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #7c3c25;
  opacity: 1.0;
  position: absolute;
  top: 0;
  left: 0;
  animation: sk-bounce 1.0s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); 
}

.sk-bounce-dot:nth-child(2) { animation-delay: -0.8s; }

@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0.66);
  } 45%, 55% {
    transform: scale(1); 
  } 
}