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

Last Reply 2 months ago By dharmendr

Posted 2 months 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

You are viewing reply posted by: dharmendr 2 months ago.
Posted 2 months 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 + '%');