"Progressive button on login"
Bootstrap 3.1.0 Snippet by Doogy

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="#myModal">
Log in
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Log in</h4>
</div> <!-- /.modal-header -->
<div class="modal-body">
<form role="form">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" id="uLogin" placeholder="Login">
<label for="uLogin" class="input-group-addon glyphicon glyphicon-user"></label>
</div>
</div> <!-- /.form-group -->
<div class="form-group">
<div class="input-group">
<input type="password" class="form-control" id="uPassword" placeholder="Password">
<label for="uPassword" class="input-group-addon glyphicon glyphicon-lock"></label>
</div> <!-- /.input-group -->
</div> <!-- /.form-group -->
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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 is successful");
button.attr("data-dismiss", "modal");
});
}
});
$('#myModal').on('hidden.bs.modal', function (e) {
var inputs = $('form input');
var title = $('.modal-title');
var progressBar = $('.progress-bar');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit PRO React
Hexa shape button
login-form
Login Form

Questions / Comments: