<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/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="container"> <div class="row"> <div class="load-overlay"> <div class="loader"> <i></i><i></i><i></i><i></i><i></i> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="holder"> <div class="box-1"></div> <div class="box-2"></div> <h1>Z</h1> </div> </div> </div> </div>

/*============== loading Script ============== ========================================= */ .loader i { position: relative; display: inline-block; margin: 0 4px; width: 5px; height: 15px; border-radius: 2px; border: solid #000; border-width: 0 1px 1px 0; background: #000; animation: tilt infinite 5s cubic-bezier(0.955, -0.010, 1.000, 1.000); transform-origin: 100% 100%; } .loader i::before { content: ''; position: absolute; z-index: -1; bottom: 0; display: block; width: 5px; height: 5px; background: transparent; box-shadow: 0 2px rgba(0, 0, 0, .3); animation: stretch infinite 5s cubic-bezier(0.955, -0.010, 1.000, 1.000); opacity: 0; transform-origin: 0% 0%; } .loader i:nth-child(2), .loader i:nth-child(2)::before { animation-delay: .3s; } .loader i:nth-child(3), .loader i:nth-child(3)::before { animation-delay: .6s; } .loader i:nth-child(4), .loader i:nth-child(4)::before { animation-delay: .9s; } .loader i:nth-child(5), .loader i:nth-child(5)::before { animation-delay: 1.2s; } .loader i:last-of-type { animation-name: tilt-last; } .loader i:last-of-type::before { animation-name: stretch-last; } @keyframes tilt { 10% { transform: rotate(70deg) } 60% { transform: rotate(70deg) } 70% { transform: rotate( 0deg) } } @keyframes tilt-last { 10% { transform: rotate(90deg) } 60% { transform: rotate(90deg) } 70% { transform: rotate( 0deg) } } @keyframes stretch { 10% { transform: rotate(-70deg); width: 10px; opacity: 1; left: 0px; bottom: -1px; } 60% { transform: rotate(-70deg); width: 10px; opacity: 1; } 70% { width: 5px; transform: rotate(0deg); opacity: 0; } } @keyframes stretch-last { 10% { transform: rotate(-90deg); width: 10px; height: 2px; opacity: .5; left: 3px; bottom: -1px; } 60% { transform: rotate(-90deg); width: 10px; height: 2px; opacity: .5; } 70% { transform: rotate(0deg); width: 5px; height: 5px; opacity: 0; } } .loader { position: absolute; display: block; margin: auto; padding: 0; width: 100px; height: 15px; text-align: center; top: 50%; left: 50%; transform: translate(-50%; -50%; ); } .load-overlay { position: fixed; width: 100%; height: 100%; background-color: #fff; top: 0; left: 0; } /*loder 2*/ .holder{ width: 80px; border: 2px solid #000; margin: 300px auto; position: relative; } .holder h1{ text-align: center; font-size: 54px; padding: 10px; } .box-1, .box-2{ position: absolute; background: #000; width: 15px; height: 15px; } .box-1{ top: -14.5px; left: -14.5px; animation: boxOne 3s infinite; } .box-2{ bottom: -14.5px; right: -14.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; } }