"Profile Completeness"
Bootstrap 3.3.0 Snippet by faisalkhan123

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
<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="progress progress-striped">
<div class="progress-bar progress-bar-success" style=""> Your Profile is 50% Completed.</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
.bar-success { background-color: #5cb85c;}
.bar-info { background-color: #5bc0de;}
.bar-warning { background-color: #f0ad4e;}
.bar-danger { background-color: #d9534f;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready( function(){
window.percent = 0;
window.progressInterval = window.setInterval( function(){
if(window.percent < 88) {
window.percent++;
$('.progress').addClass('progress-striped').addClass('active');
$('.progress .progress-bar:first').removeClass().addClass('progress-bar')
.addClass ( (percent < 40) ? 'progress-bar-danger' : ( (percent < 80) ? 'progress-bar-warning' : 'progress-bar-success' ) ) ;
$('.progress .progress-bar:first').width(window.percent+'%');
$('.progress .progress-bar:first').text(window.percent+'%');
} else {
window.clearInterval(window.progressInterval);
// jQuery('.progress').removeClass('progress-striped').removeClass('active');
//jQuery('.progress .progress-bar:first').text('Done!');
}
}, 100 );
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit Angular
FB-like profile box
Profile Card
User Profile Sidebar

Questions / Comments: