showing progress bar from database

See more:

ASP.NET

CSS

jQuery

MVC5

Hi,

I have checkboxes where a user can select some checkboxes. the data is from a database. for example there are 10 checkboxes and a user select 4 checkboxes - so that is 40% is filled in. But how to show that in a progress bar.

I have this:

css:

.default {
    background: #292929;
    border: 1px solid #111;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 5px #333;
}
.default div {
    background-color: #1a82f7;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0099FF), to(#1a82f7));
    background: -webkit-linear-gradient(top, #0099FF, #1a82f7);
    background: -moz-linear-gradient(top, #0099FF, #1a82f7);
    background: -ms-linear-gradient(top, #0099FF, #1a82f7);
    background: -o-linear-gradient(top, #0099FF, #1a82f7);
}

and jquery:

function progressBar(percent, $element) {
    var progressBarWidth = percent * $element.width() / 100;
    $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% ");
}

and then in the cshtml file:

$(document).ready(function () {
           progressBar(50, $('#progressBar'));

       });

but you can see that is hardcoded(it shows always 50%). but so how to make it dynamic that it response on the values of the database.

Thank you!!