Guillaume Duverger - Développement & Graphisme - Blog

Vous êtes ici : Accueil > Démonstrations > CSS > Autres

Loading CSS dégradé conique

Votre navigateur ne prend pas en charge cette démonstration

Code :

HTML


<div class=loading></div>


CSS


.loading{	
position:relative;
width: 10vmax;
height: 10vmax;
--angle: 0deg;
padding: 1ch;
box-sizing: border-box;
}	
	
.loading::before {
 content:"";
position:absolute;
inset: 0;
border-radius:50%;
padding:1ch; 
background: conic-gradient(from var(--angle),#656ae6 25%, #00ffba 50%, transparent 50%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out; 
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;  
animation: .8s loading linear infinite;
}
	
	
	
@keyframes loading {
  to {
	
    --angle: 360deg;
  }
}	


Source, inspiration, ressources :

A voir sur ce blog : Les dégradés coniques en CSS.

Vous rencontrez un problème avec cette démonstration ?

Avant de vous arracher les cheveux ou de crier au scandale, procédez à quelques simples vérifications. Si la démonstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de même chez vous. De plus vous pouvez télécharger la démonstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.