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

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Input valid invalid HTML CSS

Input valid invalid HTML CSS

Input file style01

Input file style01

Google Style Login

Google Style Login

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Form Création de compte

Form Création de compte

Drag and drop or upload input file

Drag and drop or upload input file

Double Scrollbar with Plugin Jquery in table

Double Scrollbar with Plugin Jquery in table

Changer le style du scroll bar in html

Changer le style du scroll bar in html

Card Profile Style01

Card Profile Style01

Asidebar Bootstrap4 style01

Asidebar Bootstrap4 style01