.center {
	min-height: 50vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* *****************************************************************
 ANIMATION
***************************************************************** */

.loader {
	position: relative;
	width: 50px;
	padding: 5rem;
	background-color: red;
}

.barre1, 
.barre2, 
.barre3 {
	position: absolute;
	left: 17px;
	width: 15px;
	height: 50px;
	top: 25px;
	background: #fff;
	animation: loader-anim 1.5s infinite;
}

.barre1 {
	animation-delay: -0.4s;
}

.barre2 {
	left: 42px;
	animation-delay: -0.2s;
}

.barre3 {
	left: 67px;
	animation-delay: 0;
}

@keyframes loader-anim {
	0% {
		transform: scaleY(1.5);
		transform-origin: center center;
	}
	100% {
		transform: scaleY(1);
		transform-origin: center center;
	}
}

/*les rond qui tourne animation*/

/* *****************************************************************
GENERALITIES
***************************************************************** */

.center {
	min-height: 50vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* *****************************************************************
 ANIMATION
***************************************************************** */

.loader {
	position: relative;
	width: 60px;
	height: 60px;
	animation: anim-loader linear 1s infinite;
}

.rond1, 
.rond2, 
.rond3 
 {
	position: absolute;
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

.rond1 {
	border: 2px solid blue;
}

.rond2 {
	border: 2px solid yellow;
	top:5px;
	left:5px;
}

.rond3 {
	border: 2px solid red;
	top: -5px;
	left: 5px;
}

@keyframes anim-loader {
	0% {
		transform: rotate(0deg);
	}
	
	100% {
		transform: rotate(360deg);
	}
}