Aller au contenu principal

Guillaume Duverger Développeur & graphiste - Blog

Loaders dégradés linéaires/radiaux CSS

Dernière modification : août 2022

Exemple 1 : dégradé linéaire et background-position



<div class="loading_noir"></div>




*{box-sizing:border-box}

.loading_noir{

border-radius: .25rem;
height: 1.25rem;
width: min(100%,30ch);
	
	}

/*chargement noir*/

.loading_noir {

animation: loading_noir 1s infinite linear;
background: hsl(0,0%,8%);
border: 1px solid hsla(0, 0%, 0%, 0.65);
background-image: linear-gradient(-45deg,hsla(0, 0%, 100%, 0.2) 25%,transparent 25%,transparent 50%,hsla(0, 0%, 100%, 0.2) 50%,hsla(0, 0%, 100%, 0.2) 75%,transparent 75%,transparent);
background-size: 50px 50px;
box-shadow:inset 0 1px hsla(0, 0%, 100%, 0.3),inset 0 2px hsla(0, 0%, 100%, 0.4),inset 0 5px 2px hsla(0, 0%, 100%, 0.4)

}


/*animation*/
	
@keyframes loading_noir{
	
	0%{
		background-position:0 0
	}
	
	100%{
		
		background-position:50px 50px
	
	}
	
	 }

	

Exemple 2 : dégradé radial et background-position



<div class="loading-rond"></div>      




.loading-rond {

  color: #6753ea;
  width: 70px;
  height: 40px;
  --degrade: radial-gradient(farthest-side,currentColor 90%,#0000);
  background: var(--degrade),var(--degrade),var(--degrade);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  animation: rond 1s infinite alternate;
}

@keyframes rond {

  0% {background-position:0 50%, 50% 50%, 100% 50%}
  20% {background-position:0 0, 50% 50%, 100% 50% }	
  40% {background-position:0 100%, 50% 0, 100% 50%}
  60% {background-position:0 50%, 50% 100%, 100% 0}
  80% {background-position:0 50%, 50% 50%, 100% 100%}
  100% {background-position:0 50%, 50% 50%, 100% 50%}
}	


Exemple 3 : transformations et dégradés CSS



<div class="loading_vert"></div>      
<div class="loading_bleu"></div>




*,*::before,*::after{box-sizing:border-box}


.loading_vert,
.loading_bleu{

border-radius: .25rem;
height: 1.25rem;
margin: 5rem auto;
width: min(100%,30ch);
	
	}


/*chargement vert*/
.loading_vert{

overflow: hidden;
border: 1px solid rgba(25,100,127,.4);
background: linear-gradient(to top,hsla(121,61%,39%,1),hsla(121,61%,26%,1));
box-shadow: inset 0 2px hsla(0, 0%, 100%, 0.2),inset 0 5px 2px hsla(0, 0%, 100%, 0.4),inset 0 15px 30px hsla(0, 0%, 100%, 0.4)

}

.loading_vert::before{

content: '';
animation: vert 3s infinite linear;
display: block;
height: 100%;
width: 100%;
background: linear-gradient(to top,hsla(121,61%,39%,.4),hsla(121,61%,26%,.4));

}
  
/*chargement bleu*/ 

.loading_bleu {

background: hsla(211,54%,30%,1);
overflow: hidden;

}

.loading_bleu::before {

content: '';
animation: bleu 3s infinite linear;
display: block;
height: 100%;
width: 100%;
background: linear-gradient(hsla(212,83%,75%,1),hsla(211,54%,30%,1)); 

}

/*animations*/
	

@keyframes vert{
	
	from{
		
		transform: translatex(-100%)
	
	}
	
	to{
		
		transform: translatex(0)
	
	}
	
	}
	@keyframes bleu{
	
	from{
		
		transform: translatex(-100%) skewx(-15deg)
	
	}
	
	to{
		
		transform: translatex(0) skewx(-15deg)
	
	}
	
	}
	

	

Exemple 4 : dégradés et masques CSS



<div class="loading-linear-grad"></div>      
<div class="loading-radial-grad"></div>




*{box-sizing:border-box}

.loading-linear-grad,
.loading-radial-grad {


width: 100px;
height: 100px;
border-radius: 50%;
animation: spin 1s infinite linear;
padding: 1ch; 
-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;

}

.loading-linear-grad{

background: linear-gradient(transparent 10%, #656ae6 50%,  #9300ff 100%);

}
	
	
.loading-radial-grad{

background: radial-gradient(circle at center top, transparent 20%, #e6548a 50%,#9300ff 100%);

  }
		
@keyframes spin {

  to {
    transform:rotate(1turn) ;
  }
}		





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

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.