Is it possible to align the vertical line of the progress Bar as per resolution?

user_12908355 0
Viewed 443

My objective is to align vertical line perfectly in the middle even we squeeze the page. Is it possible make the alignment effectively?

I've tried in this way

 <Card>
    <CardContent>
        <progress max={1000} value={500} />
        <p className="vertical_line"></p>
    </CardContent>
</Card>

CSS:

.vertical_line {
  border-left: 1px solid black;
  height: 20px;
  position: absolute;
  top: 8px;
  left: 17.5%;
}

Here is the sample (https://codesandbox.io/s/restless-cache-uj2z0)

But couldn't get exactly, Can anyone help me in this query?

reactjs css html
2 Answers

I assigned relative positioning to the parent progress container to align the line with absolute positioning.

Note: I started rule left: 49.5%. Since the line width is 1px. This means that the line is perfectly centered.

Try this code:

style.css

.vertical_line {
  border-left: 1px solid black;
  height: 20px;
  position: absolute;
  top: 0;
  left: 49.5%;
}

.progress_container {
  position: relative;
  display: inline-block;
}

App.js

export default function App() {
  return (
    <div>
      <Card>
        <CardContent
        className={'progress_container'}
        >
          <progress max={1000} value={500} />
          <p className="vertical_line"></p>
        </CardContent>
      </Card>
    </div>
  );
}
user_135734440

Using SVG you can make your own customizable progress bar component, also use animation frame on that.

const Progress = ({max,value})=> { 
  const width = max + 5;
  return (
  <svg width={width} height="20">
  <line
    x1={5}
    y1={10}
    x2={max}
    y2={10}
    strokeWidth={5}
    strokeLinecap="round"
    stroke="grey"
  />
  <style>{"@keyframes draw{to{stroke-dashoffset:0}}"}</style>
  <line
    style={{
      strokeDasharray: width,
      strokeDashoffset: width,
      animation: "draw 1s linear forwards",
    }}
    x1={5}
    y1={10}
    x2={value}
    y2={10}
    strokeWidth={5}
    strokeLinecap="round"
    stroke={"red"}
  />
  <line x1={width/2} y1={0} x2={width/2} y2={20} strokeWidth={2} stroke="black" />
</svg>
  )
}
const App = ()=> <Progress max={200} value={100} />

ReactDOM.render(
  <App/>,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

user_126087140
Related