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

                                    
Page construction avec compte à rebours style01

Page construction avec compte à rebours style01

Page 404 exemple 01

Page 404 exemple 01

Input range slider HTML style01

Input range slider HTML style01

Image hover 03

Image hover 03

Form Création de compte

Form Création de compte

Carousel Bootstrap3

Carousel Bootstrap3

Card Profile Style01

Card Profile Style01

Card Bootstrap4 01

Card Bootstrap4 01

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Background div gradient

Background div gradient

Alert Bootstrap4 style02

Alert Bootstrap4 style02

Add Remove dynamic rows with dynamic ID of input in HTML table

Add Remove dynamic rows with dynamic ID of input in HTML table