$bg-color: #eee !default
$spinner-color: #999 !default
$spinner-bg-color: #ddd !default

.loading-container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: $bg-color;
  z-index: 1000;
}

.loading-circle {
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  position: absolute;
  top: calc(50% - 40px);
  left: calc(50% - 40px);
  border-radius: 100%;
  border: 10px solid $spinner-bg-color;
  border-top-color: $spinner-color;
  animation: spin 1s infinite linear;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.loaded {
  top: -100%;
  transition: top 1s;
  transition-delay: 2s;
}