Display multiple bootstrap progress bar on same page using jQuery in ASP.Net

Hi nauna,

Refer below sample code.

HTML

<style type="text/css">
    .bar-success {
        background-color: #5cb85c;
    }

    .bar-info {
        background-color: #5bc0de;
    }

    .bar-warning {
        background-color: #f0ad4e;
    }

    .bar-danger {
        background-color: #d9534f;
    }
</style>
<div class="container">
    <div class="progress1"></div><br /><br />
    <div class="progress2"></div><br /><br />
    <div class="progress3"></div><br /><br />
    <div class="progress4"></div><br /><br />
    <div class="progress5"></div>
</div>

JavaScript

C#

<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function () {
        CalculatePercentage('<%= this.star1 %>', $('.progress1'));
        CalculatePercentage('<%= this.star2 %>', $('.progress2'));
        CalculatePercentage('<%= this.star3 %>', $('.progress3'));
        CalculatePercentage('<%= this.star4 %>', $('.progress4'));
        CalculatePercentage('<%= this.star5 %>', $('.progress5'));
    });
    function CalculatePercentage(percent, ele) {
        $(ele).removeClass().addClass('progress-bar');
        if (percent > 80) {
            $(ele).addClass('progress-bar-success');
        }
        else if (percent > 50 && percent <= 80) {
            $(ele).addClass('progress-bar-info');
        }
        else if (percent > 30 && percent <= 50) {
            $(ele).addClass('progress-bar-warning');
        }
        else {
            $(ele).addClass('progress-bar-danger');
        }
        $(ele).width(percent + '%');
        $(ele).text(percent + '%');
    }
</script>

VB.Net

<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function () {
        CalculatePercentage('<%= Me.star1 %>', $('.progress1'));
        CalculatePercentage('<%= Me.star2 %>', $('.progress2'));
        CalculatePercentage('<%= Me.star3 %>', $('.progress3'));
        CalculatePercentage('<%= Me.star4 %>', $('.progress4'));
        CalculatePercentage('<%= Me.star5 %>', $('.progress5'));
    });
    function CalculatePercentage(percent, ele) {
        $(ele).removeClass().addClass('progress-bar');
        if (percent > 80) {
            $(ele).addClass('progress-bar-success');
        }
        else if (percent > 50 && percent <= 80) {
            $(ele).addClass('progress-bar-info');
        }
        else if (percent > 30 && percent <= 50) {
            $(ele).addClass('progress-bar-warning');
        }
        else {
            $(ele).addClass('progress-bar-danger');
        }
        $(ele).width(percent + '%');
        $(ele).text(percent + '%');
    }
</script>

Code

C#

protected int star1 { get; set; }
protected int star2 { get; set; }
protected int star3 { get; set; }
protected int star4 { get; set; }
protected int star5 { get; set; }
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.star5 = 20;
        this.star4 = 99;
        this.star3 = 51;
        this.star2 = 50;
        this.star1 = 75;
    }
}

VB.Net

Protected Property star1 As Integer
Protected Property star2 As Integer
Protected Property star3 As Integer
Protected Property star4 As Integer
Protected Property star5 As Integer
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Me.star5 = 20
        Me.star4 = 99
        Me.star3 = 51
        Me.star2 = 50
        Me.star1 = 75
    End If
End Sub

Screenshot