如何将进度条作为边框附加到 div

Question

在reactjs ，我需要将线性进度条作为底部附加到div 。 我尝试使用正常的线性进度条，并使用flex-end属性将线性进度附加到div的末尾。

下面是我的实现的代码沙箱链接。

代码沙箱链接： codesandbox.io/s/linear-progress-bar-forked-udhxqz

但我的要求是div应该按照下面的截图 .

如何通过HTML和CSS更改实现以下div ？

我应该在reactjs中实现 using

Answer 1

我能够让您的示例使用一些 CSS 更改，以下是我需要更改的仅有的两个部分：

.App {
  overflow: hidden;
}

.emptyProgressBar {
  border-radius: 0px;
}

.fillingProgressBar {
  width: 102%;
}

然后在App.tsx中，将左侧样式更改为-101 ，如下所示：

left: props.percent - 101 + "%",

从您的沙盒中派生的工作示例可在此处获得。