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

                                    
toggle switch style03

toggle switch style03

page scroll progress bar

page scroll progress bar

login page green one

login page green one

input file récupérer le nom du fichier

input file récupérer le nom du fichier

Vidéo background en html5 style01

Vidéo background en html5 style01

Timeline style04

Timeline style04

Flat icon Responsive Boxes

Flat icon Responsive Boxes

Double Scrollbar with Plugin Jquery in table

Double Scrollbar with Plugin Jquery in table

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Carousel 8 bloc with B4

Carousel 8 bloc with B4

Buttons Styles Inspirations

Buttons Styles Inspirations

Arrows Defense Game

Arrows Defense Game