Loading CSS dégradé conique

Exemple 1 :

Votre navigateur ne supporte pas cette démonstration

<div class=loading></div>

.loading{
	
width: 10vmax;
aspect-ratio:1;
background: #6753ea;
-webkit-mask: 
radial-gradient( closest-side circle, #6753ea 99%, transparent 100%) center top/25% 25% no-repeat,
radial-gradient( closest-side circle, transparent 49%, red 50% 99%, transparent 100%),
conic-gradient(transparent 50%, #6753ea 90%);
-webkit-mask-composite: source-over, source-in;
animation: rotate 1s linear infinite;
}
@keyframes rotate{
  to{
      transform: rotate(1turn); 
  }
}

---

Exemple 2 :

Votre navigateur ne supporte pas cette démonstration

<div class=loading></div>

@property --debut {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}
@property --fin {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}
	
	
.loading {

width: 10vmax;
aspect-ratio: 1;
border-radius: 50%;
padding: 1ch; 
background: conic-gradient(from 45deg,transparent 0 var(--fin),#656ae6 0, violet var(--debut), transparent 0 var(--debut) );		
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; 
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;  
animation: load 2.5s infinite ease-in-out;
}


@keyframes load {
  0% {
    --fin: 0%;
    --debut: 0%;
  }
  40%,
  60% {
    --debut: 100%;
    --fin: 0%;
  }
  100% {
    --debut: 100%;
    --fin: 100%;
  }
}	
	}