"square loader 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="square"></div> <div class="track"> <span>Enter</span> </div>
body { margin:0; padding:0; } .square { position:absolute; top:50%; left:calc(50% - 50px); transform:translate(-50%,-50%); width:50px; height:50px; background:#ff0; border:4px solid #262626; box-sizing:border-box; animation:animate 1s linear infinite; } @keyframes animate { 0% { transform-origin: bottom right; transform: translate(-50%,-50%) rotate(0deg) translateX(25px); } 50% { transform-origin: bottom right; transform: translate(-50%,-50%) rotate(90deg); } 100% { transform-origin: bottom right; transform: translate(-50%,-50%) rotate(90deg) translateY(25px); } } .track { position:absolute; top:50%; left:calc(50% + 40px) ; transform:translate(-50%,-50%); width:180px; height:50px; background:transparent; border-bottom:2px solid #262626; } .track:before { content:''; position:absolute; top:-2px; right:4px; width:50px; height:50px; background:transparent; border:2px solid #262626; } .track span { position:absolute; top:-22px; right:4px; width:50px; background:#262626; color:#fff; text-transform:uppercase; font-family:sans-serif; padding:4px 6px; font-size:12px; }

Related: See More


Questions / Comments: