Loading Style snake

<!DOCTYPE html>
<html>
<head>
	<title>BOOTSTRAP4 DATEPICKER | par NGLESSON</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="BOOTSTRAP4 DATEPICKER">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>     
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>                       
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>  
</body>
</html>
.container {
    width: 144px;
    height: 100px;
    position: relative;
    margin: 0 auto;
}
.container span {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    background-color: #9B5986;
     animation: Loading 3s infinite ease-in-out; 
}
.container span:nth-of-type(2) { left: 30px; animation-delay: .2s; }
.container span:nth-of-type(3) { left: 60px; animation-delay: .4s; }
.container span:nth-of-type(4) { left: 90px; animation-delay: .6s; }
.container span:last-of-type { left: 120px; animation-delay: .8s; }

@keyframes Loading {
    0% { height: 20px; transform: translateY(0); background-color: #9B59B6; }
    50% { height: 20px; transform: translateY(40px); background-color: #3498D6; }
    100% { height: 20px; transform: translateY(0); background-color: #9B59B6; }
}

                                    
Affichage des images aléatoire avec js

Affichage des images aléatoire avec js

Calculatrice style01

Calculatrice style01

Creation dune icone de prechargement avec css

Creation dune icone de prechargement avec css

Form Step With B4 Style01

Form Step With B4 Style01

Form login b4 01

Form login b4 01

Image hover 04

Image hover 04

Input range slider HTML style01

Input range slider HTML style01

Input range slider HTML style04

Input range slider HTML style04

Nav Menu style01

Nav Menu style01

Pagination with Jquery

Pagination with Jquery

Planète animée style01

Planète animée style01

Table responsive avec css native

Table responsive avec css native