<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 id="overlay" class="open"> <div class="display-loading open"></div> <div class="success-loading hide"> <span class="glyphicon glyphicon-ok"></span> <label>Success</label> </div> </div>

.display-loading.open { border: 16px solid #f3f3f3; border-radius: 50%; border-top: 16px solid #000; width: 120px; height: 120px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; margin:0 auto; position: relative; top: 47%; } .success-loading { width: 120px; height: 120px; position: relative; top: 47%; margin:0 auto; z-index: 2001; background: rgba(0,0,0,.5); border-radius: 8px; text-align: center; padding-top: 20px; } .success-loading> span { font-size: 50px; color: white; display: block; } .success-loading> label { color: white; font-size: 24px; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #overlay.open { background-color: rgba(0,0,0,.4); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 2000; }

$(document).ready(function() { setTimeout(function() { $(".display-loading").removeClass("open"); $(".success-loading").removeClass("hide"); setTimeout(function() { $("#overlay").removeClass("open"); $(".success-loading").addClass("hide"); }, 2000); }, 1000); });