CSS loader avec fonction attr()

Votre navigateur ne supporte pas cette démonstration

<div class=demo>

<div del="0.3s"></div>
<div del="0.6s"></div>
<div del="0.9s"></div>
<div del="1.2s"></div>	

</div>
	

*{box-sizing:border-box}	

.demo{

display: flex;
gap: .5lh;
justify-content: center;

}
  
.demo div{

width: 4cqw;
aspect-ratio: 1;
background-color: var(--couleur-texte-noir);
border-radius: 1e3px;
animation-name: load;
animation-duration: 1s;
scale:0;
animation-delay: attr(del type(<time>),"");
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-direction: alternate;
   }
    
    
@media (prefers-reduced-motion: no-preference) { 
@keyframes load{
100% {
    scale:1;
}
        }
        }