Bootstrap Snippet Number Counter using HTML CSS Bootstrap Javascript

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="col-md-12">
  <div class="row">
    <div class="col-md-4 col-sm-12 d-print-inline-block" id="card-number">
        <div class="container">
            <p>Crianças ajudadas:</p>
            <span class="count">853</span>
        </div>
    </div>
    <div class="col-md-4 col-sm-12 d-print-inline-block" id="card-number" style="background-color:#f5a3d7">
        <div class="container">
            <p>Módulos realizados:</p>
            <span class="count">853</span>
        </div>
    </div>
    <div class="col-md-4 col-sm-12 d-print-inline-block" id="card-number" style="background-color:#f5a3d7">
        <div class="container">
            <p>Sorriso ganhos:</p>
            <span class="count-infinite">1000000000</span>
        </div>
    </div>
  </div>
</div>
  
  
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
#card-number {
  background-color: #2CAFFD;
  border: 1px solid #FFFFFF;
  text-align: center;
  width: 100%;
  height: 200px;
  color: #FFFFFF;
}
.container {
    padding: 4em;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$('.count').each(function() {
  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: 8000,
    easing: 'swing',
    step: function(now) {
      $(this).text(Math.ceil(now));
    }
  });
});
$('.count-infinite').each(function() {
  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: 1000000,
    easing: 'swing',
    step: function(now) {
      $(this).text(Math.ceil(now));
    }
  });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Number Counter"
Bootstrap 4.1.1 Snippet by anvictor

Related: See More

Questions / Comments:

"Number Counter" Bootstrap 4.1.1 Snippet by anvictor

Related: See More

Questions / Comments:

"Number Counter"
Bootstrap 4.1.1 Snippet by anvictor