使用进度条添加文本消息

Question

因此，我试图在进度条上方添加两条文本消息。

我想复制'检查你的答案！'正在进度条上方，正在进行。

然后我想'批准！'取代“检查你的答案！”一旦酒吧达到100％。

以下是我为我的酒吧实施的代码。

EX

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 


<link href='http://twitter.github.com/bootstrap/assets/css/bootstrap.css' rel='stylesheet' type='text/css'> 

JS

var progress = setInterval(function() { 
    var $bar = $('.bar'); 

    if ($bar.width()==400) { 
     clearInterval(progress); 
     $('.progress').removeClass('active'); 
    } else { 
     $bar.width($bar.width()+40); 
    } 
    $bar.text($bar.width()/4 + "%"); 
}, 900); 

加价

<div class="progress progress-striped active"> 
    <div class="bar" style="width: 0%;"></div> 

Answer 1

这里有一个选项：

var progress = setInterval(function() { 
    var $bar = $('.bar'); 
    if ($bar.width()==400) { 
     clearInterval(progress); 
     $('.progress').removeClass('active'); 
     $("#announcement").text("Approved!"); 
    } else { 
     $bar.width($bar.width()+40); 
    } 
    $bar.text($bar.width()/4 + "%"); 
}, 900); 

有了这个HTML：

<div id="announcement">Checking your answers!</div> 
<div class="progress progress-striped active"> 
<div class="bar" style="width: 0%;"></div> 

这里是一个demo。