<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--[if IE]> <link href="~/Content/NewHomePage/all-ie-only.css" rel="stylesheet" /> <![endif]-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body style="background:#ccc;">
<div class="container-fluid">
<div class="container" style="margin-top:10%;">
<div class="col-md-12" style="color:#fff;">
<div class="col-md-3"></div>
<div class="col-md-6 no-padding" style="background-color:#3a95a8; min-height:300px; border:solid 2px #3a95a8; border-radius:10px;"> <h3> Logo</h3>
<p style="border-bottom:dashed 1px #fff;"></p>
<p style="text-align:center; font-size:16px; padding-top:10px;">Your Patience is appreciated, while we are searching the lowest fare.</p>
<table width="100%">
<tr>
<td align="left" style="padding-left:10px;"><h3>Mumbai(BOM)</h3></td>
<td align="right" style="padding-right:10px;"><h3>Dubai(DXB)</h3></td>
</tr>
<tr>
<td align="left" style="padding-left:10px;">Tue, Sept 18, 2018</td>
<td align="right" style="padding-right:10px;">Wed, Sept 25, 2018</td>
</tr>
</table>
<div style="margin-top:40px;">
<div class="loader">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
<div class="item-4"></div>
<div class="item-5"></div>
</div>
</div> <br/>
<div class="clearfix"></div><br/>
<div style="padding:10px; text-align:center; color:#FFFFFF; font-size:24px; padding-bottom:25px;"> Call Us Now : +1-000-000-0000</div>
</div>
<div class="col-md-3"></div>
</div>
</div></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="custom.js"></script>
</body>
</html>
.loader {display:flex;justify-content:center;align-items: center;overflow:hidden;animation-delay:1s; height:50px;}
.item-1 {width:20px;height:20px; background:#f583a1; border-radius:50%; background-color:#eed968;margin:7px; display:flex;justify-content:center;align-items:center;}
@keyframes scale {
0% {
transform: scale(1);
}
50%,
75% {
transform: scale(2.5);
}
78%, 100% {
opacity: 0;
}
}
.item-1:before {content: ''; width:20px;height:20px;border-radius:50%;background-color:#eed968; opacity:0.7;animation:scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);animation-delay:200ms;transition:0.5s all ease;
transform: scale(1);
}
.item-2 {width: 20px; height:20px; background:#f583a1; border-radius:50%; background-color:#eece68; margin:7px; display:flex; justify-content:center; align-items:center;}
@keyframes scale {
0% {
transform: scale(1);
}
50%,
75% {
transform: scale(2.5);
}
78%, 100% {
opacity: 0;
}
}
.item-2:before {
content: ''; width:20px; height:20px; border-radius:50%;
background-color:#eece68; opacity:0.7; animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);animation-delay: 400ms;transition: 0.5s all ease;transform: scale(1);}
.item-3 { width:20px;height:20px;background:#f583a1;border-radius:50%;background-color:#eec368;margin:7px; display:flex;justify-content:center;align-items:center;}
@keyframes scale {
0% {
transform: scale(1);
}
50%,
75% {
transform: scale(2.5);
}
78%, 100% {
opacity: 0;
}
}
.item-3:before {content: ''; width:20px;height:20px; border-radius:50%;
background-color:#eec368; opacity:0.7;animation:scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);animation-delay:600ms;transition:0.5s all ease;transform:scale(1);}
.item-4 {width:20px;height:20px;background:#f583a1;border-radius:50%;background-color:#eead68;margin:7px;display: flex;justify-content: center;align-items: center;}
@keyframes scale {
0% {
transform: scale(1);
}
50%,
75% {
transform: scale(2.5);
}
78%, 100% {
opacity: 0;
}
}
.item-4:before {content: '';width:20px;height:20px;border-radius:50%;background-color:#eead68;opacity:0.7;animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02); animation-delay: 800ms;transition: 0.5s all ease;transform: scale(1);}
.item-5 {width:20px; height:20px; background:#f583a1; border-radius:50%; background-color:#ee8c68; margin:7px; display:flex; justify-content:center; align-items:center;}
@keyframes scale {
0% {
transform: scale(1);
}
50%,
75% {
transform: scale(2.5);
}
78%, 100% {
opacity: 0;
}
}
.item-5:before {content: ''; width:20px; height:20px; border-radius:50%; background-color:#ee8c68 ;opacity: 0.7; animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);animation-delay:1000ms;
transition:0.5s atransform: scale(1);}
