getJSON обновить прогресс бар

Question

Попытка получить этот прогресс бар на Bootstrap, чтобы показать прогресс в реальном времени от API JSON, а также показывая% от цели достигнуты:

Вот как это выглядит сейчас: http://puu.sh/jt2Gu/823f6a6a0f.png

Оба индикатора прогресса должны быть центрированы на странице, а сам прогресс не обновляется, и я не уверен, почему, пожалуйста, помогите?

• прогресс бар для монет продано
• прогресс бар на сумму поднял
• % финансируемую (должен быть на вершине изображения)

CSS:

} 
.progress { 
    position: absolute; 
    top: 80%; 
    z-index: 2; 
    text-align: center; 
    width: 50%; 

} 

HTML:

<div class="container"> 
    <div class="banner-buynow"> 
     <div class="col-md-2 col-md-offset-3 object-non-visible" 
     data-animation-effect="fadeIn"> 
      <a class="btn btn-info" href="javascript:void(0);" onclick= 
      "opentac();">Buy Now<br> 

      <div class="ratebtc"></div></a> 
     </div> 

     <div class="progress"> 
      <div class="progress-bar active progress-bar-striped active"> 
       <div class="percentage-label"></div> 
      </div> 
     </div> 
    </div> 

    <div class="progress"> 
     <div class= 
     "progress-bar progress-bar-success progress-bar-striped active" 
     style="width:1%"> 
      <div class="goal-label"></div> 
     </div> 
    </div> 
</div> 

<div class="funded-label"></div> 

JS

$.getJSON("https://www2.shapeshift.io/crowdsales", function (json) { 
    var soldT = Math.round(json.sold); 
    var left = json.remaining; 
    var total = Math.round(soldT+left); 
    var ratebtc = json.rateT; 
    var percent = Math.round(soldT/total*100); 
    var backers = json.orders; 
    var raisedtotal = Math.round(json.raised) + ' BTC'; 
    var goal = Math.round(raisedtotal/730); 
    var percentsold = Math.round(percent) + '%'; 
    var backers = json.orders + ' backers'; 
    var funded = Math.round(json.raised/730*100); 
    $('.progress-bar').css('width', percentsold); 
    $('.percentage-label').html(soldT + " coins sold "); 
    $('.ratebtc').html(ratebtc); 
    $('.backers').html(raisedtotal + " from " + backers); 
    $('.progress-bar-success').css('width', goal); 
    $('.goal-label').html(raisedtotal + " towards goal of 730 BTC"); 
    $('.funded-label').html(funded + " % funded"); 
}); 

JSFiddle: https://jsfiddle.net/qy1ko5xf/

Answer 1

вы можете добавить DIV с классом funded-label внутри контейнера, если вы хотите быть в нижней части контейнер. введите absolute.

вот обновленный HTML

<div class="container"> 
    <div class="banner-buynow"> 
     <div class="col-md-2 col-md-offset-3 object-non-visible" 
     data-animation-effect="fadeIn"> 
      <a class="btn btn-info" href="javascript:void(0);" onclick= 
      "opentac();">Buy Now<br> 

      <div class="ratebtc"></div></a> 
     </div> 
      <br/> 
     <div class="progress"> 
      <div class="progress-bar active progress-bar-striped active"> 
       <div class="percentage-label"></div> 
      </div> 
     </div> 
    </div> 

    <div class="progress"> 
     <div class= 
     "progress-bar progress-bar-success progress-bar-striped active" 
     style="width:1%"> 
      <div class="goal-label"></div> 
     </div> 
    </div> 
<div class="funded-label"></div>   
</div> 

CSS для funded-label DIV должен выглядеть следующим образом

.funded-label{ 
    color: white; 
    font-weight: bold; 
    position: absolute; 
    bottom: 0px; 
    background-color: #003a74; 
    width: 100%; 
    text-align: left; 
    padding: 5px; 
} 

и, наконец, вот обновленный JS

$(function(){ 
    $.getJSON("https://www2.shapeshift.io/crowdsales", function (json) { 
     console.log(json); 
     var soldT = Math.round(json.sold); 
     var left = json.remaining; 
     var total = Math.round(soldT+left); 
     var ratebtc = json.rateT; 
     var percent = Math.round(soldT/total*100); 
     var backers = json.orders; 
     var raised = Math.round(json.raised); 
     var raisedtotal = raised + ' BTC'; 
     var goal = Math.round((raised/730) * 100); 
     console.log(goal); 
     var percentsold = Math.round(percent) + '%'; 
     var backers = json.orders + ' backers'; 
     var funded = Math.round(raised/730*100); 
     $('.progress-bar').css('width', percentsold); 
     console.log(soldT); 
     console.log(total); 
     $('.percentage-label').html(soldT + " coins sold "); 
     $('.ratebtc').html(ratebtc); 
     $('.backers').html(raisedtotal + " from " + backers); 
     $('.progress-bar-success').css('width', goal + '%'); 
     $('.goal-label').html(raisedtotal + " towards goal of 730 BTC"); 
     $('.funded-label').html(funded + " % funded"); 
    }); 

}); 

работа JSFIDDLE. надеюсь это поможет.