两个进度条以div为中心？

Question

我一直在尝试重新创建您在下图中看到的内容：

我在堆栈上找到了一些进度条的例子，但是我无法像你在图片中看到的那样对齐和定位它们。此外，我无法在进度条旁边显示文本而不会偏移。有干净的方法吗？

造型并不重要，我遇到的主要问题是条形和文字的定位和缩放。

Answer 1

这是你想要的吗？告诉我，如果我不理解这个问题。仅供参考，Stackoverflow不是人们为您编程的东西。在来到这里之前先尝试自己尝试：）

＆＃13;

＆＃13;

<div class="progressSuperContainer">
  <div class="label">label for the bar</div>
  <div class="progressContainer">
    <div class="progressValue"></div>
  </div>
</div>

<div class="progressSuperContainer">
  <div class="label">label for the bar</div>
  <div class="progressContainer">
    <div class="progressValue"></div>
  </div>
</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;