Java 如何创建进度条？

我试图在Thymeleaf模板引擎内部创建一个引导进度条

这就是我所尝试的：

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

---

我发现，在这个特定的例子中，如果将每个变量都放在它们自己的

${…}

中，阅读逻辑会稍微容易一些，但不必这样做*

您有语法错误，因为您有

+'%'，其中最后的
位于引用文本之后。它应该是引用文本的一部分：
+'%；'

要从计算中获得有意义的值，请确保使用的是浮点数，而不是整数。对于整数，您的值将计算为0或1

我添加了额外的括号，使条件求值表达式与字符串连接分离

以下是我的版本：

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



最后注意：这显然是一个完全静态的进度条。如果没有返回服务器的往返，它将不会更新

*除非您特别希望控制表达式如何使用OGNL和Thymeleaf求值

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