Animation Progress Bar

Base on bootstrap progress bar.

by jrunning

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="container">
    <div class="progress progress-striped active">
        <div class="bar" style="width: 0%;"></div>
    </div>
</div>

CSS

.container { margin: 1em; width: 300px; }

CoffeeScript

setProgress = (percent)->
    percent    = Math.min percent, 100
    percentStr = "#{percent}%"
    
    $bar.css  "width", percentStr
    $bar.text percentStr

    if percent == 100
        # wait to let the movement stop, then remove ".active" to stop the
        # the "in-progress" stripe animation (this isn't necessary if the
        # bar will be hidden as soon as it gets to 100%)
        setTimeout ->
            $bar.closest('.progress').removeClass 'active'
        , 600


$bar      = $('.bar')
testData  = [10, 25, 50, 80, 100]
millisecs = 0
    
for percentage in testData
    millisecs += 800
    setTimeout ((pct)-> -> setProgress(pct))(percentage), millisecs