0

I want to make a Javascript for changing the progression bar.

<div class="progress-bg">
        <div class="progress-bar">
            <h3 class="raised">$30</h3>
        </div>

            <h3 class="goal">Goal:$45</h3>
    </div>


@-webkit-keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }
@-moz-keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }
@-o-keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }
@keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }


.progress-bar {
height: 50px;
border-radius: 10px;
float: left;
width: 10%;


I would like to just edit the raised amount in the html and the progression bar will automatically adjust. so class raised divided by class goal as what's shown the value would be .66 so I would need to change that to % and insert it into the style part of the html. Any help with this would be great as I have not had much work with Javascript.

1
  • Let me know if my answer works Jul 21, 2016 at 16:35

3 Answers 3

0

Below is the jQuery script that will help you set it. You need to modify the currentProgress number as you see fit:
var currentProgress = 40;

Here's the jsFiddle: https://jsfiddle.net/GunWanderer/d9yeqsqx/1

Don't forget to include your jQuery library and Bootstrap css and js.

CSS:

<style>
body {
padding: 10px;}

.progress-bar span {color:#fff;}

@-webkit-keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }
@-moz-keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }
@-o-keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }
@keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }


.progress-bar {
height: 50px;
border-radius: 10px;
float: left;
width: 10%;
}

</style>  

HTML:

<div class="progress">
    <div id="myProgressBar" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
        <span id="currentProgress">$30</span>
    </div>
</div>      
<h3 id="goal" class="goal">Goal:$45</h3>

jQuery script:

<script>
$(document).ready(function() {
    //Modify your numbers here:
    var goal = 45;
    var currentProgress = 40;

    //Script:
    var percentage = currentProgress / goal * 100;
    $("#myProgressBar").css("width", percentage + '%');
    var status = '$' + currentProgress + ' (' + Math.round(percentage) + '%)';
    $("#currentProgress").html(status);
    $("#goal").html('Goal: $' + goal);
});
</script>
0

You can just use HTML5 Progress bar as follows it will automatically calculate and display the result

<progress max="45" value="30"></progress>

0

HTML

<div class="progress">
    <div class="progress__bar"></div>
    <div class="progress__bar--progressed"></div>
</div>

CSS

.progress {
    // Your custom modifications
    height: 10px;
    width: 100px;

    position: relative;
}
.progress .progress__bar {
    height: 100%;
    width: 100%;

    position: absolute;
    top: 0;
    left: 0;

    opacity: 0.7;

    background-color: #EEE;
}
.progress .progress__bar--progressed {
    height: 100%;
    width: 100%;

    position: absolute;
    top: 0;
    left: 0;

    background-color: green;
}

JavaScript

var yourWidth = "80%";
document.querySelector('.progress__bar--progressed').style.width = yourWidth;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.