*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
}

:root {
  --accent: hsl(230deg 100% 20%);
  --size: 2.5rem;
  --duration: 1s;
}

body {
  height: 100vh;
  width: 100vw;
  font-family: Avenir, arial;
  display: flex;
  justify-content: center;
  align-items: center;
}

footer {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 1rem 1.2rem;
  color: #8f9ca3;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  line-height: 1rem;
}
footer svg {
  height: 10px;
  width: 12px;
  color: #d98c8c;
}

.spinner {
  width: var(--size);
  aspect-ratio: 1;
  display: grid;
  -webkit-mask: conic-gradient(from 22deg, #0001, #000);
          mask: conic-gradient(from 22deg, #0001, #000);
  -webkit-animation: spin var(--duration) steps(8) infinite;
          animation: spin var(--duration) steps(8) infinite;
}
.spinner, .spinner:before {
  --gradient: linear-gradient(var(--accent) 0 0);
  background: var(--gradient) 50%/34% 8% space no-repeat, var(--gradient) 50%/8% 34% no-repeat space;
}
.spinner:before {
  content: "";
  transform: rotate(45deg);
}

@-webkit-keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}