Question

0

226

Views

Function to determine three procentual values in relation to each other - Progressbar [Javascript]

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 class="progress">
        <div style="width:100%" class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar"></div>
        <div style="width:100%" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar"></div>
        <div style="width:100%" class="progress-bar progress-bar-striped progress-bar-animated bg-info" 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 class="progress">
        <div style="width:200%" class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar"></div>
        <div style="width:100%" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar"></div>
        <div style="width:100%" class="progress-bar progress-bar-striped progress-bar-animated bg-info" 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.

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T01:35:46.843Z

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 class="progress">
    <div id="red" style="width:100%" class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar"></div>
    <div id="green" style="width:100%" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar"></div>
    <div id="blue" style="width:100%" class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar"></div>
</div>
<script type="text/javascript" src="script.js"></script>

Something like ??

Answer 2 · 2022-07-03T01:35:46.851Z

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 class="progress">
  <div style="width:100%" class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar"></div>
  <div style="width:100%" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar"></div>
  <div style="width:100%" class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar"></div>
</div>

0

226

Function to determine three procentual values in relation to each other - Progressbar [Javascript]

2 answers

0

0

Find remote jobs

Andres GPT