Bootstrap 3进度条设置转换完成时的文本答案

【问题标题】：Bootstrap 3 Progress Bar set Text when transition is completeBootstrap 3进度条设置转换完成时的文本
【发布时间】：2015-09-24 13:10:10
【问题描述】：

我这里有一个引导进度条：

<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，使用引导程序 3.3.4。

编辑 1：

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

编辑 2：

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

【问题讨论】：

你能给我们提供一个 Fiddle 以便我们为你测试它吗？
请在 jsfiddle.net 上提供一个示例
加了一个例子，见编辑
你能提供你正在使用的进度条插件的链接吗？
@BarryDoyle 我已经用演示添加了答案..你可以检查一下..

标签： javascript jquery css twitter-bootstrap progress-bar

【解决方案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
       }
   });    
});

【讨论】：

任何时候..快乐编码..:)