<img src="/favicon.svg" class="load-img" />
<svg class="loading-spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  <circle class="full-circle" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  <path class="indicator" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>

<style>
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  .loading-spinner {
    width: 2rem;
    height: 2rem;
    animation: spin 1s linear infinite;
  }
  .load-img {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0.5rem;
  }
  .full-circle {
    opacity: 25%;
  }
  .indicator {
    opacity: 75%;
  }
</style>
