"square loading animation"
Bootstrap 4.1.1 Snippet by prakash27dec

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="loader"></div>
body { margin:0; padding:0; background:#000; } .loader { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; box-sizing:border-box; border:3px solid #f00; animation:animate 2s linear infinite; } .loader:before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:#ff0; animation:animatebg 2s linear infinite; } @keyframes animate { 0% { transform:translate(-50%,-50%) rotate(0deg); } 25% { transform:translate(-50%,-50%) rotate(180deg); } 50% { transform:translate(-50%,-50%) rotate(180deg); } 75% { transform:translate(-50%,-50%) rotate(360deg); } 100% { transform:translate(-50%,-50%) rotate(360deg); } } @keyframes animatebg { 0% { height:0; } 25% { height:0; } 50% { height:100%; } 75% { height:100%; } 100% { height:0; } }

Related: See More


Questions / Comments: