<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <button class="btn btn-primary" data-toggle="modal" data-target="#loginModal">Login</button> <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <buton type="button" class="close" data-dissmiss="modal" aria-hidden="true">x</buton> <h4 class="modal-title" id="loginModalLabel">Log in</h4> </div> <div class="modal-body"> <form role="form"> <div class="form-group"> <div class="input-group"> <input type="text" class="form-control" id="username" placeholder="Username"> <label for="username" class="input-group-addon glyphicon glyphicon-user"></label> </div> </div> <div class="form-group"> <div class="input-group"> <input type="password" class="form-control" id="password" placeholder="Password"> <label for="password" class="input-group-addon glyphicon glyphicon-lock"></label> </div> </div> <div class="checkbox"> <label> <input type="checkbox">Remember me </label> </div> </form> </div> <div class="modal-footer"> <button class="form-control btn btn-primary">Proceed</button> <div class="progress"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="1" aria-valuemax="100" style="width: 0%;"> <span class="sr-only">Progress</span> </div> </div> </div> </div> </div> </div>

body{ padding: 50px; } .modal-dialog { width: 300px; } .modal-footer { height: 70px; margin: 0; } .modal-footer .btn { font-weight: bold; } .modal-footer .progress { display: none; height: 32px; margin: 0; } .input-group-addon { color: #fff; background: #3276B1; }

/** * Created by lpsandaruwan on 10/18/16. */ $(document).ready(function () { $('.modal-footer button').click(function () { var button = $(this); if(button.attr("data-dismiss") != "modal") { var inputs = $('form input'); var title = $('.modal-title'); var progress = $('.progress'); var progressBar = $('.progress-bar'); inputs.attr("disabled", "disabled"); button.hide(); progress.show(); progressBar.animate({width: "100%"}, 100); progress.delay(1000).fadeOut(600); button.text("Close") .removeClass("btn-primary") .addClass("btn-success") .blur() .delay(1600) .fadeIn(function () { title.text('Log in succesful'); button.attr("data-dismiss", "modal") }); } }); $('#loginModal').on('hidden.bs.modal', function (e) { var inputs = $('form input'); var title = $('.modal-title'); var progressBar = $('.progress-bar'); var button = $('.modal-footer button'); inputs.removeAttr("disabled"); progressBar.css({"width": "0%"}); button.removeClass("btn-success") .addClass("btn-primary") .text("Okay") .removeAttr("data-dissmiss"); }); });