引导进度条从中心开始，并向左或向右扩展

Question

我希望有一个自启动进度条，该进度条从其中心开始，然后可以根据值向左和向右扩展。

这是我要实现的使用Indesign创建的图像：

transitionConfig

进度条左侧的0是最小值，中间的（10）是起始值，右侧是最大值（20）。 7是实际值。根据实际值，进度条应向左或向右扩展，取决于它大于或小于起始值。

我知道进度条通常在引导程序中是如何工作的，但是我无法解决我的特定问题。

我正在使用Bootstrap v4.1.2。