.loading {
  --size: 30px;
  text-align: center;
}
.loading__spinner {
  width: var(--size);
  height: var(--size);
  display: inline-block;
  vertical-align: top;
  -webkit-animation: loading__animate infinite 1s linear;
  animation: loading__animate infinite 1s linear;
}
.loading__spinner__circle {
  stroke: #DBDBDB;
}
.loading__spinner__notch {
  stroke: var(--colour-one);
}
@media (min-width: 768px) {
  .loading {
    --size: 40px;
  }
}
@-webkit-keyframes loading__animate {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}
@keyframes loading__animate {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}