"loader"
Bootstrap 3.3.0 Snippet by imsachin

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

Related: See More


Questions / Comments: