Function to determine three procentual values in relation to each other

I have a problem I can't seem to fix.

I have built a ProgressBar in a symfony application with bootstrap installed. I'm using the following code to display the bar:

<link href="https://bootswatch.com/5/sketchy/bootstrap.min.css" rel="stylesheet"/>
<div >
        <div style="width:100%"  role="progressbar"></div>
        <div style="width:100%"  role="progressbar"></div>
        <div style="width:100%"  role="progressbar"></div>
    </div>

I want to overlap the bars to display three different values. So for example:

Bar1 should show 50% progress
Bar2 should show 75% progress (the 50% from Bar1 25% own)
Bar3 should show 100% progress (the 50% from Bar1 25% from Bar2 25% own)

So that can be achieved with following configuration:

Bar1: 200% width
Bar2: 100% width
Bar3: 100% width

<link href="https://bootswatch.com/5/sketchy/bootstrap.min.css" rel="stylesheet"/>
<div >
        <div style="width:200%"  role="progressbar"></div>
        <div style="width:100%"  role="progressbar"></div>
        <div style="width:100%"  role="progressbar"></div>
    </div>

But how would I for example display the following:

Bar1: 30% progress
Bar2: 70% progress
Bar3: 100% progress

I need a function to determine the width of the three bars to show my wanted values. Then I could add the value for width via javascript.

CodePudding user response：

document.getElementById("red").style.width = "30%";
document.getElementById("green").style.width = "70%";
document.getElementById("blue").style.width = "100%";

<link href="https://bootswatch.com/5/sketchy/bootstrap.min.css" rel="stylesheet"/>
<div >
    <div id="red" style="width:100%"  role="progressbar"></div>
    <div id="green" style="width:100%"  role="progressbar"></div>
    <div id="blue" style="width:100%"  role="progressbar"></div>
</div>
<script type="text/javascript" src="script.js"></script>

Something like ??

CodePudding user response：

The following setWidth() function will automatically change the width. Just pass your wanted values as arguments. You don't need to do anything. Just call this function like this => setWidth(30, 70, 100)

function setWidth(...arg) {
  let widths = Array.from(document.querySelectorAll('.progress>div'))
    .forEach((el, i) => el.style.width = (arg[i] - (arg[i - 1] ? arg[i - 1] : 0))   "%")
}
setWidth(30, 70, 100)

<link href="https://bootswatch.com/5/sketchy/bootstrap.min.css" rel="stylesheet" />
<div >
  <div style="width:100%"  role="progressbar"></div>
  <div style="width:100%"  role="progressbar"></div>
  <div style="width:100%"  role="progressbar"></div>
</div>