90
Counter 001
80
Counter 001
60
60%
Counter 001
40
40%
Counter 001
100
Counter 001
80
Counter 002
60
Counter 003
40
Counter 004
Steps to get started
- Step 1 : Add scripts
- 1. jQuery
- 2. FontAwesome
- 3. BitCounter.min.js
- Step 2 : Add Stylesheets
- 1. Add bootstrap library
- 2. Add BitCounter.min.css
- Step 3 : HTML for progress meter:
<div class="bit-progress-list">
<div class="bit-counters row">
<div class="bit-counter-item col-sm-3">
<span class="value">90</span>
<span class="content"><i class="fa fa-handshake-o" aria-hidden="true"></i></span>
<span class="title">Counter 001</span>
</div>
</div>
</div>
- Step 4 : HTML for counter:
<div class="bit-counters-list">
<div class="bit-counters row">
<div class="bit-counter-item col-sm-3">
<span class="icon"><i class="fa fa-handshake-o" aria-hidden="true"></i></span>
<span class="value count">100</span>
<span class="title">Counter 001</span>
</div>
</div>
</div>
- Step 5 : Append this script to the end:
<script type="text/javascript">
jQuery(document).ready(function(){
//For Progress Meter
jQuery('.bit-progress-list').animateCounter({
animationType: 'progressMeter',
borderBackground: '#4c4c4c',
borderForeground: '#2c9579',
circleBackground: '#2b2c2c',
counterColor: '#000000',
});
//For Counter
jQuery('.bit-counters-list').animateCounter({
animationType: 'counter'
});
})
</script>