Thymeleaf -How to create progress bar?

Question

I was trying to create a bootstrap progress bar inside of Thymeleaf template engine

This is what I tried:

<div class="progress-bar bg-blue" role="progressbar" th:style="'width:' +${order.total == 0  ? '0' : (order.completed / order.total) * 100 } +'%';" aria-valuemin="0" aria-valuemax="100" th:text="${order.total == 0  ? '0' : (order.completed / order.total) * 100  }"></div>

here is what I was getting an error

Could not parse as expression: "'width:' +${order.total == 0  ? '0' : (order.completed / order.total) * 100 } +'%';" (template: "/fragments/menus-progress.html" - line 59, col 98)

Answer 1

I find it slightly easier to read the logic, in this specific case, if you surround each of the variables in their own ${...} - but you don't have to do this*.

You have a syntax error because you have +'%'; , where the final ; is after the quoted text. It should be part of the quoted text: +'%;' .

To get meaningful values from your calculations, make sure you are using floating point numbers, not integers. With integers, your values will calculate to either 0 or 1.

I added extra parentheses, to make the conditional evaluation expression separate from the string concatenations.

Here is my version:

<div 
     role="progressbar" 
     th:style="'width:' + ( ${order.total} == 0  ? '0' : (${order.completed * 1.0} / ${order.total}) * 100.0 ) + '%;'" 
     aria-valuemin="0" 
     aria-valuemax="100"
     th:text="${order.total == 0  ? '0' : (order.completed * 1.0 / order.total) * 100.0  }">
</div>

Final note: This is obviously a completely static progress bar. It will not update, without a round-trip back to the server.

* Unless you specifically want to control how the expression uses OGNL vs Thymeleaf evaluations.