style.css

/* vars */
html {
  height: 100%;
  background-color: #e0c764;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U0Y2Y3OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RjYmY0ZiIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: radial-gradient(
    ellipse cover at center,
    #e4cf79 0%,
    #dcbf4f 100%
  );
}

.spinner {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -15px;
  margin-left: -15px;
  border: 3px solid #b99b25;
  border-radius: 50%;
}
.spinner:before,
.spinner:after {
  content: '';
  position: absolute;
  display: block;
  width: 3px;
  background-color: #b99b25;
  border-radius: 1.5px;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}
.spinner:before {
  height: 9px;
  left: 13.5px;
  top: 50%;
  -webkit-animation: spin 2000ms linear infinite;
  animation: spin 2000ms linear infinite;
}
.spinner:after {
  height: 12px;
  left: 13.5px;
  top: 50%;
  -webkit-animation: spin 500ms linear infinite;
  animation: spin 500ms linear infinite;
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}