Show User Profile completed percentage in Progress bar using jQuery in ASP.Net

Last Reply one year ago By dharmendr

Posted one year ago


i have 4 fields in database 

first name

last name



i want to show a proflie completed bar to user like if user has only fill first name so it shows 20% filled bar and 80% blank bar should check value from data like 

like this

Posted one year ago

Hi nauna,

For dynamic percentage calculation declare a property in code behind. Then based on your logic calculate the percentage and assign the property value in code behind.

Then using the percent in JavaScript display the pregress bar.

Check this example.


protected int Percentage { get; set; }
protected void Page_Load(object sender, EventArgs e)
    // Calculate precentage based on your logic.
    Percentage = 60;


<script type="text/javascript">
    $(function () {
        CalculatePercentage('<%= this.Percentage %>');
    function CalculatePercentage(percent) {
        $('.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(percent + '%');
        $('.progress .progress-bar:first').text(percent + '%');