<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="load-overlay"> <div class="loader"> <i></i><i></i><i></i><i></i><i></i> </div> </div>

/*============== loading Script ============== ========================================= */ .loader i { 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; transform: translate(-50%; -50%; ); } .load-overlay { position: fixed; width: 100%; height: 100%; background-color: #fff; top: 0; left: 0; }