progress bar

for timer

by Sanjay Mysoremutt

HTML

<script src="//cdn.jsdelivr.net/bootstrap.progressbar/0.7.1/bootstrap-progressbar.js"></script>
<p style='text-align: center'>
    <button id='start' class='btn btn-primary'>start</button>
    <button id='reset' class='btn btn-info'>reset</button>
</p>
<div class="progress1">
    <div class="progress__bar">
        <span>&#8986;</span><span>&#8986;</span><span>&#8986;</span><span>&#8986;</span><span>&#10711;</span><span>&#10711;</span><span>&#10711;</span><span>&#8987;</span><span>&#8987;</span><span>&#8987;</span><span>&#10710;</span><span>&#10710;</span><span>&#10710;</span>
</div>

CSS

.progress1 {
    margin: 30px;
}
.progress__bar {
    float: right;
    font-size: 2em;
    padding-left: .5em;
    border: 2px solid white;
    border-radius: 10px;
    display: inline-block;
    background: white;
    color: darkblue;
    letter-spacing: .6em;

}

CoffeeScript

init = ->
  $bar = $('.progress__bar')
  
  setupBar1 = ->
    progress = setInterval( ->
      if $bar.find('span').length > 0
        $bar.find('span:first').fadeOut(1000, ->
                                        $(@).remove()
                                        )
      else
        return clearInterval(progress)
    , 1000)
    
  count = 20
  $('#start').on 'click', ->
    setupBar1()
    #while $bar.find('span').length > 0 and count-- > 0
    #    $bar.find('span:first').fadeOut('slow', ->
    #                                    alert @
    #                                    $(@).remove()
    #                                    )
        
  $('#reset').on 'click', ->
    b = "<span>&#8987;</span>"
    b += b for [1..3]
    $bar.html b

   
$(document).ready( ->
  init()
)