Patrick Kime Kamis0ri89 Patrick Kime Kamis0ri89 - 4 months ago 6
Javascript Question

Changing size of progression bar?

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.

Answer

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