Question

I made this simple html snippet: <div class="progress-bar"></div>, then I styled it:

.progress-bar {
    background-color: #DFDFDF;
    height: 24px;
    margin-bottom: 6.66667px;
    margin-left: -2px;
    margin-top: -22px;
    z-index: 1;
}

Additionally:

<li>
<span class="name">
<a>theme</a>
</span>
<span class="value"> <?=$howtsrg?></span>
<div class="progress-bar"></div>
</li>

<?=$howtsrg?> = the value feteched from the database

Now, I want to give this progressbar a width, but this has to be automatically, depending on the value that is been fetched from the database. For example, I now have a list with a value 7 and a value 2… I want to have a different width of the progressbar, because they do not have the same value. How can I make this work? I couldn’t find a relevant jQuery script.

PS: the list values are dynamic and will change as days go past! So 7 and 2 can be 15 and 22!

Answer 1

Just do this way. Say, you have got a value like 72. You can use jQuery to do this way:

$(".progress-bar").css("width", "75%");

Or, you can do this way:

$(".progress-bar").width("75%");

You need to give px: Change width: <?=$howtsrg?>px;