html,
body {
  height: 100%;
}



.svg-loader {
  transition: 1s;
  z-index: 2;
  position: absolute;
  top: calc(50% - 80px);
  left: calc(50% - 80px);
  width: 160px;
  height: 160px;
  fill: rgba(60, 179, 113, 0.8);
  overflow: visible;
  animation: spin linear 1.3s infinite forwards;
}
.svg-loader:hover + .overlay:after {
  opacity: 1;
}
.svg-loader .svg-circle {
  stroke: rgba(144, 238, 144, 0.6);
  stroke-width: 60;
  stroke-dasharray: 628;
  stroke-dashoffset: 30;
  animation: dash 2s ease-in-out infinite forwards;
  transform-origin: 50% 50%;
}

@keyframes dash {
  0%, 100% {
    stroke-dashoffset: 30;
  }
  50% {
    stroke-dashoffset: 598;
  }
}
@keyframes spin {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
.overlay {
  transition: 1s;
  background: radial-gradient(rgba(255, 255, 255, 0.5), rgba(144, 238, 144, 0.5));
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.overlay:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  transition: 1s;
  z-index: 1;
  opacity: 0;
}

.content {
  transition: opacity 2s ;
  opacity: 0;
}