<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="loader"> <span></span> <span></span> <span></span> </div> <h1>Do you have Dreams ?</h1>

body { margin:0; padding:0; background:#111; } h1 { position:absolute; top:50%; left:50%; z-index:-1; font-size:70px; transform:translate(-50%,-50%); color:#fff; } .loader { position:absolute; top:50%; transform:translateY(-50%); width:100%; height:10px; text-align:center; } .loader span { width:30px; height:30px; background:#fff; display:inline-block; border-radius:50%; animation:animate 2s linear infinite; opacity:0; } .loader span:nth-child(1) { animation-delay:0.8s; background:#00c2ff; } .loader span:nth-child(2) { animation-delay:0.4s; background:#ffe837; } .loader span:nth-child(3) { animation-delay:0.2s; background:#ff1b78; } @keyframes animate { 0% { transform: translateX(-200px); opacity:0; } 25% { transform: translateX(-100px); opacity:1; } 50% { transform: translateX(0); opacity:1; } 75% { transform: translateX(0); opacity:1; } 100% { transform: translateX(100px); opacity:0; } 90% { transform: translateX(100px); opacity:0; } }