Creating a Progress Bar in Javascript to Compare Three Percentage Values

Trying to solve a persistent issue.

In my Symfony application with Bootstrap, I created a ProgressBar. The code snippet below displays 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>

My aim is to overlap the bars for three different values. For instance:

  • Bar1 should show 50% progress
  • Bar2 should display 75% progress (50% from Bar1 + 25% individual)
  • Bar3 should indicate 100% progress (50% from Bar1 + 25% from Bar2 + 25% individual)

To achieve this configuration, use these widths:

  • 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>

However, what if I want to represent the following:

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

I'm in need of a function to calculate the widths for the three bars based on my desired values. Then I can update the width value using JavaScript.

javascriptcssprogress-barbootstrap-5percentage

Answer №1

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 similar to this code snippet?

Answer №2

The setWidth() function provided below is designed to automatically adjust the width based on the arguments passed to it. By simply calling the function with your desired values, the width will be updated accordingly. For example, you can use it 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Java Nashorn with WebEngine events

I'm having trouble processing events from a webEngine in Nashorn. Despite setting up the code to handle the "load" event, nothing is being printed or indicating that any events are triggering from the webEngine. #!/usr/bin/jjs -fx engine = (v=new(s=j ...

javascriptjavanashorn

Bootstrap 4: Arrange input fields in a horizontal layout

I'm a newbie when it comes to Bootstrap 4 and could use some guidance. I'm looking to have my first two input fields aligned horizontally on the same line, instead of stacked on top of each other. Something like this: check out the image here B ...

htmlcssbootstrap-4

Managing field placement as the table height grows: tips and tricks

I am encountering an issue with my dynamic form. When I click on the add button, a new row is added to the table. However, once there are more than 6 rows added, the table height starts covering the fields. How can I go about setting this so that the field ...

javascriptjqueryhtmlcss

Issues with using a personalized font in a Stenciljs project

Looking for guidance on implementing a custom font in my Stenciljs app. I have the otf file, unsure if an npm package is necessary. Here's my code: filestructure: -src --components --assets ---Anurti-Regular.tiff ---Anurti-Regular.ttf friends-l ...

javascriptcsstypescriptnpmstenciljs

"Trouble with Heroku: JavaScript script failing to load with 404

My adventure in building my first web app using MEAN on Heroku has been both thrilling and frustrating. I meticulously followed their guide to set up a sample app, downloaded the code, and made modifications to have a customized login page. However, I hit ...

javascriptangularjsnode.jsherokuexpress

What is the process of converting the timing from my stopwatch to a standard time format?

I am currently working on a stopwatch project where I log the time into an array. However, when I try to use Math.min(array) or Math.max(array), it returns NaN (not a number). The time format for the stopwatch is like 00:00:15.91 which is not recognized as ...

javascript

What steps can be taken to resolve the dependency problem with npm installation?

Attempting to incorporate npm install react-material-ui-carousel --save into my react project has presented a challenge. Upon installation, I encountered a dependency tree issue. Even after deleting the lock and npm modules files, followed by running npm ...

javascriptreactjsnpmmaterial-ui

Coloring a table in vue.js based on performance rankings

I'm facing an issue with sorting my data performance in vue js. Here is the script I have created so far: <template> <div> <div class="row"> <h2> Campaign Performance </h2> <table class=&q ...

javascripthtmlvue.js

Converting SVG with an external PNG file embedded into a standalone PNG format using Node

Does anyone know of a node package that can convert an svg file to a png, including external images embedded within the svg code like this? <?xml version="1.0" encoding="utf-8"?> <svg viewBox="0 0 120 120" height="120" width="120" xmlns="h ...

javascriptsvgnpmpngsharp

Exploring the possibilities of video textures using Three.js in combination with Google Cardboard

Looking to incorporate a video texture in Three.js by following the approach demonstrated in this example: . Additionally, I am keen on utilizing the Google Cardboard Chrome API for my site, as outlined here: . However, upon testing the program on Chrome ...

javascriptthree.jshtml5-videogoogle-cardboardvirtual-reality

Focusing on the Div element to set the background color

I'm attempting to target the specific div that will allow me to add a background color to the highlighted red area below. I've tried using this code #yui_3_10_1_1_1370470471782_587, but I'm not sure if it's the correct one. If someone ...

csshtmlwebbackground-color

Having trouble aligning photos in the grid

I am facing an issue aligning my menu and image grid. The grid is inline-block but the first item stays stuck in the upper right-hand corner no matter what I do, without affecting the navigation menu placement. Additionally, when testing locally, everythin ...

htmlcssgridphoto

The image spills out of its confines

Looking to create a dialogue box that fills the entire width and height of the screen? Want to divide its content into two sections - an image and a footer area with 2 rows of height? Struggling to contain the image within its designated space without over ...

htmlcsstailwind-css

``Can anyone provide guidance on extracting data from Xmlhttprequest POST request on my Nodejs express backend?"

Is there a way to properly send the values of candid and candidresults to my backend route /savevote in Express? Any help on how to achieve this would be appreciated. var candid; var candidresults; ...

javascriptnode.jsexpressxmlhttprequesthttp-post

Removing a section of HTML from an EmailMessage Body in EWS

Is there a way to remove certain parts of the EWS EmailMessage .Body.Text value in C# before replying with a ResponseMessage? The elements that need to be removed include clickable and non-clickable buttons in HTML format. Since custom tags cannot be dec ...

c#htmlcssexchangewebservices

Uploading image files using Node Express and returning them as JSON in an API response

Is it possible to send json along with an image file in Express? I know that you can serve an image using res.sendFile const path = require('path'); app.get('/image/:filename', (req, res, next) => { res.type('png'); r ...

javascriptnode.jsexpresshttp

Align two divs to the left and the other one to the right

Here is the current structure of my code: <div style="height: 100px; Width: 200px;"> <!-- Container --> <div style="float: left; height: 50px; Width: 100px; background-color: ...

htmlcss

Trouble Displaying DHtmlX Scheduler Events on Safari and Internet Explorer

I have recently embarked on the journey of building a nodejs application and decided to incorporate DHtmlX Scheduler as my calendar. To my dismay, I encountered an issue where the events are not displaying on Safari or IE, despite working perfectly fine on ...

javascriptnode.jsexpresscross-browserdhtmlx

Is there a way to alter the text color using JavaScript on the client side?

Is there a way to change the color of a list item in a ul based on whether it is a palindrome or not? Here is the JavaScript file I am working with: function isPalindrome(text){ return text == text.split('').reverse().join(''); } c ...

javascripthtmlformsstylesevent-listener

Using JavaScript to dynamically populate a popover with content

Struggling to incorporate a button into my popover using JS. The plan is to eventually create these buttons with PHP, but something seems amiss. <div class="col-1"> <a data-toggle="popover" id="bedsButton" data-plac ...

javascripthtmlbootstrap-4