simpleTimeBar/example.html at master · rVibe/simpleTimeBar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html>
  <head>
    <script src="./simpleTimeBar.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="row-fluid">

      <div class='span5 offset5'>
        <h1>SimpleTimeBar</h1>
      </div>
      <div class="span5 offset4">
      <div class="hero-unit">
        <div style="display: none" class="alert alert-success" id="completed">
          Completed!
        </div>
        Count to 10
        <div class="progress">
          <div class="bar" style="width: 0%"></div>
        </div>
        Seconds elapsed: <span id="time"></span>
      </div>
    </div>
    </div>


  </body>
</html>
<script>
  var thisTimeBar = new SimpleTimeBar(10, {});
  thisTimeBar.$.on("update", function(ev, time, val) {
    //this event, when triggered, will change the width of the element
    $("#time").text(time);
    console.log(val);
    $(".bar").css({width: val});

  });
  thisTimeBar.$.on("end", function(ev, val) {
    //this event is triggered on completion of the progress bar

    $(".bar").remove();


  });

  thisTimeBar.$.on("complete", function(ev, data_object) {
    $("#completed").show();

  })

  $(document).ready(function() {
    thisTimeBar.begin();
  });

</script>