Bootstrap 3 Progress Bar набор текста, когда переход завершен

Question

У меня есть самозагрузки прогресс бар здесь:

<div class="progress progress-striped active"> 
    <div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal="100" aria-label="0"></div> 
</div> 

Класс шесть-втор-простота в отъезде как раз там, чтобы продлить переход и код здесь: (не уверен, если это влияет на это или нет - не думаю, что он делает)

.six-sec-ease-in-out { 
    -webkit-transition: width 6s ease-in-out; 
    -moz-transition: width 6s ease-in-out; 
    -ms-transition: width 6s ease-in-out; 
    -o-transition: width 6s ease-in-out; 
    transition: width 6s ease-in-out; 
} 

А вот мой JS просто сохранить текст по центру:

<script> 
    $(document).ready(function() { 
     $('.progress .progress-bar').progressbar({ display_text: 'center' });  
    }); 
</script> 

Мой вопрос:

Как изменить текст прогресса из процента на что-то вроде «Задача завершена», когда переход завершен (т. Достигнуто 100% достигнуто)?

Я предполагаю, что я использую javascript для этого, но я понятия не имею, какие методы я должен использовать. В настоящее время я использую последний индикатор выполнения бутстрапа, который является v0.8.5, используя bootstrap 3.3.4.

Edit 1:

В соответствии с просьбой, вот пример JSFiddle: https://jsfiddle.net/DTcHh/12460/ (не слишком хорошо знакомы с использованием JSFiddle)

Edit 2:

Ad просил, вот ссылка на плагин, который я использую: http://www.minddust.com/project/bootstrap-progressbar/

Answer 1

DEMO и Doc

Вы можете использовать done вариант, где вы можете иметь callback function обновить text, как показано ниже:

$(document).ready(function() { 
    $('.progress .progress-bar').progressbar({ 
     display_text: 'center', 
     done:function(){ //use this option 
     setTimeout(function(){ 
      $(".progressbar-front-text").text("The task is completed"); 
     },100);//small amount of time to render html 100ms infact 
     } 
    });  
});