javascript - Changing size of progression bar? -

i want make javascript changing 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 { { width: 0%; } { width: 10%; } @-moz-keyframes progress-bar { { width: 0%; } { width: 10%; } @-o-keyframes progress-bar { { width: 0%; } { width: 10%; } @keyframes progress-bar { { width: 0%; } { width: 10%; } 

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

i edit raised amount in html , progression bar automatically adjust. class raised divided class goal what's shown value .66 need change % , insert style part of html. great have not had work javascript.

below jquery script set it. need modify currentprogress number see fit:
var currentprogress = 40;

here's jsfiddle: https://jsfiddle.net/gunwanderer/d9yeqsqx/1

don't forget include jquery library , bootstrap css , js.

css:

<style> body { padding: 10px;}  .progress-bar span {color:#fff;}  @-webkit-keyframes progress-bar { { width: 0%; } { width: 10%; } @-moz-keyframes progress-bar { { width: 0%; } { width: 10%; } @-o-keyframes progress-bar { { width: 0%; } { width: 10%; } @keyframes progress-bar { { width: 0%; } { 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 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>