<svg width="100" height="100" viewBox="0 0 100 100">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#f00" />
      <stop offset="100%" stop-color="#3020ff" />
    </linearGradient>
  </defs>
  <circle cx="50" cy="50" r="48" stroke="url(#gradient)" stroke-width="4" fill="none" />
</svg>
<div class="circle"></div>

svg {
  animation: spin 2s infinite linear;
}
  
.circle {
  position: relative;
  width: 100px;
  height: 100px;
}

.circle::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='gradient' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23f00' /%3E%3Cstop offset='100%25' stop-color='%233020ff' /%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='48' stroke='url(%23gradient)' stroke-width='4' fill='none' /%3E%3C/svg%3E");
  animation: spin 2s infinite linear;
}

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