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>

六秒缓入缓出 class 只是为了延长过渡时间，代码就在这里：（不确定它是否会影响这个 - 不要认为它会影响)

.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%）将进度文本从百分比更改为类似 "The task is completed" 的内容？

我假设我使用 javascript 来执行此操作，但我不知道应该使用什么方法。我目前正在使用最新的 bootstrap 进度条，它是 v0.8.5 使用 bootstrap 3.3.4.

编辑 1：

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

编辑 2：

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

Answer 1

DEMO and 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
       }
   });    
});

Bootstrap 3 过渡完成时进度条设置文本

Bootstrap 3 Progress Bar set Text when transition is complete

javascript

css

jquery

twitter-bootstrap

progress-bar