.loading {
  position: relative;
}
.loading @keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.loading::before {
  z-index: 100;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0,0.1);
  animation: show 0.3s;
}

.loading @keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.loading::after {
  z-index: 101;
  content: "";
  position: absolute;
  border-width: 3px;
  border-style: solid;
  border-color: transparent #ffffff #ffffff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  top: calc(50% - 12px);
  left: calc(50% - 12px);
  animation: 2s linear 0s normal none infinite running spin, show 0.3s;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}