Guillaume Duverger - Développement & Graphisme - Blog

Des loadings en pur CSS

Code :

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

*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}

.rond {
	
display: flex;
margin: 2rem auto;
border-width: 6px ;
border-style: solid;
border-color: hsla(0,0%,0%,.1) hsla(0,0%,0%,.1) hsla(0,0%,0%,.1) #7A5FFF;
border-radius: 50%;
width: 100px;
height: 100px;
animation: rond 2s linear infinite;
}
	
		@keyframes rond {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Code :

<div class='liste-loading'>
<ul>
<li>C</li>
<li>H</li>
<li>A</li>
<li>R</li>
<li>G</li>
<li>E</li>
<li>M</li>
<li>E</li>
<li>N</li>
<li>T</li>
</ul>
</div>

*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}

.liste-loading {
	
	display:flex;
	justify-content: center;
	margin:2rem auto
	
	}
	
.liste-loading li{
	
display:inline-flex;
justify-content: center;
padding:.5rem;
background: #7A5FFF;
color: hsl(0,0%,100%);
animation: load 3s backwards infinite linear alternate}

	
.liste-loading li:nth-child(2){animation-delay:.25s}
	
.liste-loading li:nth-child(3){animation-delay:.5s}
	
.liste-loading li:nth-child(4){animation-delay:.75s}
	
.liste-loading li:nth-child(5){animation-delay:1s}
	
.liste-loading li:nth-child(6){animation-delay:1.25s}
	
.liste-loading li:nth-child(7){animation-delay:1.5s}
	
.liste-loading li:nth-child(8){animation-delay:1.75s}
	
.liste-loading li:nth-child(9){animation-delay:2s}
	
.liste-loading li:nth-child(10){animation-delay:2.25s}
	

@keyframes load{
	
	0%{
	
	transform: scale(1.2)
	
	}
	
	100%{
		
	transform: scale(0)
	
	}
	
	}

Exemple simple sous forme de ligne :

Code :

<div class="ligne"></div>

*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}

.ligne{
	
margin:5rem 0;
height:.3125rem;
background-color: #7A5FFF;
width:0;
animation:ligne 2s forwards infinite linear
	
	}
@keyframes ligne{


	to{
		width:100%
	
	}
	
	}

Exemple avec la propriété background-clip :

Code :

<div class="loading">Chargement...</div>

*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}

.loading {
	
display: inline-block;
font-size: calc(100vw/16);
color: transparent;
background: linear-gradient(to left, #7A5FFF 95%, transparent 100%);
background-size: 200%;
background-clip: text;
animation: loading 2s infinite ease-in-out
	
}

	
	
	
@keyframes loading{
	
	0%{background-position:0 0}
	
	50%{background-position:-100% 0}
	
	}

Code :

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

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

*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}

.loading_noir,
.loading_vert,
.loading_bleu{
	
border-radius: .25rem;
height: 1.25rem;
margin: 2rem auto;
width: 100%;
max-width: 20rem
	
	}

/*chargement noir*/
	
.loading_noir {
	
animation:noir 1s infinite linear;
background:hsla(0,0%,8%,1);
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)
	
	}

/*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 div{
	
height:100%;
background: linear-gradient(to top,hsla(121,61%,39%,.4),hsla(121,61%,26%,.4));
animation: vert 3s infinite linear
	
	}
  
/*chargement bleu*/  
	
.loading_bleu {

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

	
.loading_bleu div {
	
background: linear-gradient(hsla(212,83%,75%,1),hsla(211,54%,30%,1));	
height: 100%;
animation: bleu 3s infinite linear
	
	}

   

/*animations*/
	
@keyframes noir{
	
	0%{
		background-position:0 0
	}
	
	100%{
		
		background-position:50px 50px
	
	}
	
	}
	
@keyframes vert{
	
	from{
		
		transform: translatex(-100%)
	
	}
	
	to{
		
		transform: translatex(0)
	
	}
	
	}
	@keyframes bleu{
	
	from{
		
		transform: translatex(-100%) skewx(-15deg)
	
	}
	
	to{
		
		transform: translatex(0) skewx(-15deg)
	
	}
	
	}

Support navigateurs :

CSS animation