Combining multiple progress bars into a single bar

Question

Combining multiple progress bars into a single bar

Considering the title, here's an example scenario:

Imagine a setup where 80% is represented by the green bar and 90% by the darker grey bar. However, due to some coding complications, I couldn't display the 90% on the right side of the bar as intended. Instead, I had to manually edit it using Paint.

Currently, I have been utilizing the following code structure for this progress bar:

HTML:

<div id='progBar'>
    <div>
        <div>
        </div>
    </div>
</div>

JS: progress:

function (percent, current,  $element) {
    var progressBarWidth = percent * $element.width() / 100;
    var currentBarWidth = current * $element.width() / 100;
    $element.find('div').animate({ width: progressBarWidth }, 2000);
    $element.find('div div').animate({ width: currentBarWidth }, 2000);
}

CSS:

#progBar {
    width: 275px;
    height: 20px;
    border: 1px solid #BDBDBD;
    background-color: #F2F2F2;
    margin: 2px 0 0 4px;
    line-height: 13px;
    font-size: 10px;
    text-align: right;
    color: #000;
}

#progBar div {
    height: 100%;
    color: #fff;
    text-align: right;
    line-height: 25px;
    width: 0;
    background-color: #D8D8D8;
}

#progBar div div {
    height: 40%;
    border: 1px solid #BDBDBD;
    background-color: #b4d134;
    margin-top: 6px;
    line-height: 13px;
    font-size: 10px;
    text-align: left;
    color: #000;
}

The first div bar with id Progbar represents the entire progress bar. The second block refers to the primary (darker grey) progress bar, while the third block denotes the secondary green bar.

Although the code seems to be functioning well, my issue arises when attempting to showcase the percentage on the far right end of the progress bar (the 90%). It appears that the stacking of several div blocks in one line might be causing this discrepancy.

Is there an alternative approach to aligning my progress bar similar to the above depiction? I prefer not to arrange two separate bars side by side but rather stack them precisely like the image shown above.

UPDATE: Upon executing these lines of code below,

$element.find('div').animate({ width: progressBarWidth }, 2000).html(target + "%&nbsp;");
$element.find('div div').animate({ width: currentBarWidth }, 2000).html(current + "%&nbsp;");

The current percentage displays correctly on the left side, yet the target percentage on the right side fails to do so...

jquery html css

Answer 1

Answer №1

UPDATE:

I have made some changes to the code, you can view it here: http://jsfiddle.net/QtBlueWaffle/Aftyj/8/

Here is how the updated code looks now:

var easing = "linear"; //easeOutBounce

function trackProgress(percent, current, $element, duration) {

    var $ref = $('#progressBar1');
    var progressBarWidth = percent * $element.width() / 100;
    if ($element.is($ref)) {
        $element.find('div').animate({
            width: progressBarWidth
        }, duration, easing);
    } else {
        $element.find('div').animate({
            width: progressBarWidth
        }, duration, easing).html(percent + "%&nbsp;");
    }
}


// Tester 1
var currentPercentage1 = 0;
var currentPercentage2 = 0;
setInterval(function () {
    if (currentPercentage1 < 100) {
        currentPercentage1 = currentPercentage1 + 10;
        trackProgress(currentPercentage1, 0, $('#progressBar1'), 500);
        $('#overlayPercentage').html(currentPercentage1 + "%&nbsp;")
    } else {
        $('#progressBar1').find('div').css({
            width: 0
        });
        currentPercentage1 = 0;
    }
}, 1000);


// Tester 2
setInterval(function () {
    if (currentPercentage2 < 100) {
        currentPercentage2 = currentPercentage2 + 5;
        trackProgress(currentPercentage2, 0, $('#progressBar2'), 100);

    } else {
        $('#progressBar2').find('div').css({
            width: 0
        }).html("&nbsp;");
        currentPercentage2 = 0;
    }
}, 200);

Here is also the stylesheet that goes with the code:

#progressTable {
    width:400px;
}
#progressBar1 {
    height:44px;
    border: 1px solid #111;
    background-color: #292929;
}
#progressBar2 {
    position:relative;
    top:-58px;
    height:22px;
    border: 1px solid #111;
    background-color:rgba(0, 0, 0, 0);
}
.progressBar div {
    height:100%;
    color:#fff;
    line-height:22px;
    width:0;
    text-align:right;
}
#overlayPercentage {
    text-align:right;
    border:1px solid #f11;
    position:relative;
    top: -35px;
    color:#fff;
}

I hope this information is helpful.

Answer 2

UPDATE:

I have made some changes to the code, you can view it here: http://jsfiddle.net/QtBlueWaffle/Aftyj/8/

Here is how the updated code looks now:

var easing = "linear"; //easeOutBounce

function trackProgress(percent, current, $element, duration) {

    var $ref = $('#progressBar1');
    var progressBarWidth = percent * $element.width() / 100;
    if ($element.is($ref)) {
        $element.find('div').animate({
            width: progressBarWidth
        }, duration, easing);
    } else {
        $element.find('div').animate({
            width: progressBarWidth
        }, duration, easing).html(percent + "%&nbsp;");
    }
}


// Tester 1
var currentPercentage1 = 0;
var currentPercentage2 = 0;
setInterval(function () {
    if (currentPercentage1 < 100) {
        currentPercentage1 = currentPercentage1 + 10;
        trackProgress(currentPercentage1, 0, $('#progressBar1'), 500);
        $('#overlayPercentage').html(currentPercentage1 + "%&nbsp;")
    } else {
        $('#progressBar1').find('div').css({
            width: 0
        });
        currentPercentage1 = 0;
    }
}, 1000);


// Tester 2
setInterval(function () {
    if (currentPercentage2 < 100) {
        currentPercentage2 = currentPercentage2 + 5;
        trackProgress(currentPercentage2, 0, $('#progressBar2'), 100);

    } else {
        $('#progressBar2').find('div').css({
            width: 0
        }).html("&nbsp;");
        currentPercentage2 = 0;
    }
}, 200);

Here is also the stylesheet that goes with the code:

#progressTable {
    width:400px;
}
#progressBar1 {
    height:44px;
    border: 1px solid #111;
    background-color: #292929;
}
#progressBar2 {
    position:relative;
    top:-58px;
    height:22px;
    border: 1px solid #111;
    background-color:rgba(0, 0, 0, 0);
}
.progressBar div {
    height:100%;
    color:#fff;
    line-height:22px;
    width:0;
    text-align:right;
}
#overlayPercentage {
    text-align:right;
    border:1px solid #f11;
    position:relative;
    top: -35px;
    color:#fff;
}

I hope this information is helpful.

Combining multiple progress bars into a single bar

Answer №1

Similar questions

Is it possible to use jQuery to load a page via AJAX and define a callback function on the loaded page

transform ajax data into an array structure

Why are the dots/navigation buttons not showing up on owlcarousel?

What is the best way to create a div with a smaller background color than its content?

Issue with Bootstrap5: images not properly fitting into the carousel content

Struggling with a Python CGI script that refuses to open a file sent to it via AJAX

Displaying specific choices depending on the previous selection made

verify whether the image source has been altered

Issue with conditions in window.setTimeout function

Experiencing a problem with generating nested elements using JavaScript

A guide on converting array values to objects in AngularJS HTML

CSS code that fixes a textarea at the bottom of a div

Creating bookmarks using xhtmlrenderer in iText

The outcome from the PHP file was JSON data, refrain from interpreting it as plain text

The incorporation of styled components into the child component seems to be malfunctioning

There seems to be a glitch in the AJAX code

Inserting an Excel spreadsheet into a webpage as a table

Activate the JavaScript loader while data is being fetched

Sending PHP emails may encounter issues when there is a URL link enclosed in an anchor tag within the email body

Activation of the button is required once the Recaptcha and checkbox have been successfully validated