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) ;
}
}