<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 ----------> <div class="container"> <div class="middle"> <div class="col-md-12"> <form method="post" action="#" role="login"> <p style="color:white;">E-mail</p> <input type="email" name="email" placeholder="Email" required class="form-control input-lg" value="mailtomassnaveen@gmail.com" /><br> <p style="color:white;">Password</p> <input type="password" class="form-control input-lg" id="password" placeholder="Password" required="" /> <span id="eye" style="display:none" data-click-state="1" class="glyphicon glyphicon-eye-open"></span> <div class="process" style="display:none"><p> </p> <div class="progress"> <div id="bar" class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 10%;"> Poor  </div> </div> </div> <br><br> <button type="submit" name="go" class="btn btn-lg btn-primary btn-block">Sign in</button> </form> </div> </div> </div>

body{ background:url("https://1.bp.blogspot.com/-QdtWby1gE2M/WIIfAKwWaoI/AAAAAAAABbI/W3IKzqJQ4ysz8Zs9gNu-ilHBhQ_GAAEbACLcB/s1600/bg.jpg") no-repeat; background-size:cover; } body::before{ background-color: rgba(0, 0, 0, 0.37); content: ''; display: block; height: 100%; position: absolute; width: 100%; z-index:-1; } .middle{ width:445px; height:395px; background-color: rgba(0, 0, 0, 0.5); margin-top:125px; margin-left:325px; border-radius:12px; padding:56px; } #password{ padding-right:29px; } #eye{ font-size:125%; cursor:pointer; postion:absolute; float:right; margin-top:-31px; margin-right:12px; }

$(document).ready(function(){ $("#password").keyup(function(){ var value = $("#password").val(); var strength = value.length; if(strength > 0){ $(".process").show(); $("#bar").addClass("progress-bar-danger").html("poor") ; $("#eye").show(); if(strength > 3){ $("#bar").removeClass("progress-bar-danger").removeClass("progress-bar-success").addClass("progress-bar-warning").css("width","30%").html("Weak ") ; }if(strength > 6){ $("#bar").css("width","60%").html("Medium").removeClass("progress-bar-success").addClass("progress-bar-warning") ; } if(strength > 12){ $("#bar").removeClass("progress-bar-warning").addClass("progress-bar-success").css("width","100%").html("Strong ") ; } }else{ $("#bar").removeClass("progress-bar-warning").removeClass("progress-bar-success").addClass("progress-bar-danger").css("width","10%").html("poor ") ; $("#eye").hide(); $(".process").hide(); } }); $("#eye").click(function(){ if($(this).attr('data-click-state') == 1) { $(this).attr('data-click-state', 0).removeClass("glyphicon-eye-open").addClass("glyphicon-eye-close"); $("#password").attr('type','text'); } else { $(this).attr('data-click-state', 1).removeClass("glyphicon-eye-close").addClass("glyphicon-eye-open"); $("#password").attr('type','password'); } }); });