Search code examples
djangodjango-templatestagsdjango-tagging

Bootstrap progress bar with dynamic progress value

I have a progress bar in a table similar to this:

Example bar

I can pass the value "2" for the percentage, but I cannot pass the value 2 to the aria-valuenow class that sets how fill is shown the progress bar. How could I pass the dynamic value to aria-valuenow so the progress bar shows the right filling?

I tried {{value.3}},"{{value.3}}", the same with only one {} and with/without % %. I really run out of imagination.

{% for key,value in ctxt.items %}
  <tr><td>{{value.0}}</td><td>{{value.1}}</td><td>
    {% if value.3 %}
    <div class="progress align-content-center position-relative" style="height: 25px;">
      <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow= "{% value.3 %}" aria-valuemin="0" aria-valuemax="100"></div>
      <small class="justify-content-center  d-flex position-absolute w-100">{{value.3}}%</small>
    </div>
    {% endif %}
</td></tr>
{% endfor %}

*Another battle is to put the "2%" vertically centered and not in the top with the position-absolute commands. If you know this, really appreciated too!

Solution

  • Actually the value of the bar is not defined by aria-valuenow but by the width. So the bar should work as follows:

    <div class="progress-bar" role="progressbar" style="width: {{ value.3 }}%;" aria-valuenow= "{{ value.3 }}" aria-valuemin="0" aria-valuemax="100"></div>