<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>L</span> <span>O</span> <span>A</span> <span>D</span> <span>I</span> <span>N</span> <span>G</span> </div>

body { margin:0; padding:0; background:#FFFFFF; } .loader { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-top:4px solid #e91e63; border-bottom:40px solid #FFFF; border-left:4px solid #e91e63; border-right:4px solid #e91e63; display:flex; padding:0 40px 20px; } .loader span { position:relative; display:block; width:2px; height:100px; background:#e91e63; margin:0 14px; transform-origin:top; } .loader span:before { content:''; position:absolute; bottom:0; left:-14px; width:30px; height:30px; border-radius:50%; background:#e91e63; } .loader span:first-child { animation:animate 1s linear infinite; } .loader span:last-child { animation:animate2 1s linear infinite; animation-delay:0.5s; } @keyframes animate { 0% { transform:rotate(0deg); } 25% { transform:rotate(60deg); } 50% { transform:rotate(0deg); } 100% { transform:rotate(0deg); } } @keyframes animate2 { 0% { transform:rotate(0deg); } 25% { transform:rotate(-60deg); } 50% { transform:rotate(0deg); } 100% { transform:rotate(0deg); } }