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">&#10711;&#10711;&#10711;&#8987;&#8987;&#8987;&#10710;&#10710;</div>
</div>

CSS

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

CoffeeScript

init = ->
  $bar = $('.progress__bar')

  setupBar1 = ->
      progress = setInterval( ->
        txt = $bar.text()
        console.log("ready! #{txt.length}")
        if txt.length > 0
          $bar.text(txt.substring(1))
        else
          return clearInterval(progress)
      , 500)

    $('#start').on 'click', ->
      setupBar1()

    $('#reset').on 'click', ->
      $bar.html '&#10711;&#10711;&#10711;&#8987;&#8987;&#8987;&#10710;&#10710;'

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