javascript - Bootstrap 3 进度条在转换完成时设置文本

Question

我这里有一个 Bootstrap 进度条:

<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 来执行此操作，但我不知道应该使用什么方法。我目前正在使用最新的 Bootstrap 进度条，它是使用 Bootstrap 3.3.4 的 v0.8.5。

编辑 1:

根据要求，这是一个 JSFiddle 示例:https://jsfiddle.net/DTcHh/12460/(不太熟悉使用 JSFiddle)

编辑 2:

请求广告，这是我正在使用的插件的链接:http://www.minddust.com/project/bootstrap-progressbar/

Answer 1

DEMO 和 Doc

您可以使用 done 选项，您可以使用 回调函数 来更新 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
       }
   });    
});