How to attach a progress bar as a border to div-CodePudding

In React I need to attach a linear progress bar as a bottom to div. I tried with a normal linear progress bar and attached the linear progress to the end of the div with the flex-end property. Below is the code sandbox link for my implementation.

Code Sandbox Link:-.

How can I achieve the below div with HTML and CSS changes?I should implement using in ReactJS

CodePudding user response：

I was able to get your example working with a few CSS changes, below are the only two parts I needed to change:

.App {
  overflow: hidden;
}

.emptyProgressBar {
  border-radius: 0px;
}

.fillingProgressBar {
  width: 102%;
}

Then in App.tsx, change your left style to -101, like the following:

left: props.percent - 101   "%",

A working example forked from your sandbox is available here.