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!!