<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="holder"> <div class="box-1"></div> <div class="box-2"></div> <div class="box-3"></div> <h1>Z</h1> </div> </div> </div> </div>

/*============== loading Script ============== ========================================= */ .holder { width: 82px; border: 4px solid #000; margin: 300px auto; position: relative; height: 80px; } .holder h1 { text-align: center; font-size: 50px; padding: 0px; font-weight: 600; color: #000; margin-top: 5px; } .box-1, .box-2 { position: absolute; background: #000; width: 8px; height: 8px; z-index: 99; } .box-3 { position: absolute; background: #fff; width: 25px; height: 25px; top: -4px; right: -4px; } .box-1{ top: -15.5px; left: -15.5px; animation: boxOne 3s infinite; } .box-2{ bottom: -15.5px; right: -15.5px; animation: boxTwo 3s infinite; } @keyframes boxOne{ 0%{ left: -14.5px; } 25%{ left: 80px; top: -14.5px; transform: rotate(90deg); } 50%{ top: 73.5px; left: 80px; } 75%{ left: -14.5px; top: 73.5px; } 100%{ top: -14.5px; } } @keyframes boxTwo{ 0%{ right: -14.5px; } 25%{ right: 80px; bottom: -14.5px; transform: rotate(90deg); } 50%{ bottom: 73.5px; right: 80px; } 75%{ right: -14.5px; bottom: 73.5px; } 100%{ right: -14.5px; } }