<span class="counter-value active" data-count="100">100</span>+
if(SDB.App.exists('.sg-counter-ready')){
$(document).ready(startCounterReady);
flag = 1;
function startCounterReady() {
if ($('.sg-counter-ready').length > 0) {
$('.sg-counter-ready').each(function () {
var _current = $(this);
var countDuration = 0;
var toTop = _current.offset().top - window.innerHeight;
if (countDuration == 0 && $(window).scrollTop() > toTop && _current.find('.counter-value').hasClass('active')) {
_current.find('.counter-value').each(function () {
var $this = $(this),
countTo = $this.attr('data-count');
countNum: $this.text();
$({
}).animate({
countNum: countTo
}, {
duration: 1500,
easing: 'swing',
step: function (now) {
$this.text(Math.ceil(now).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
},
complete: function () {
$this.stop();
}
});
$this.removeClass('active');
});
countDuration = 1;
}
});
}
}
}
if(SDB.App.exists('.sg-counter')){
$(window).scroll(startCounter);
flag = 1;
function startCounter() {
if ($('.sg-counter').length > 0) {
$('.sg-counter').each(function () {
var _current = $(this);
var countDuration = 0;
var toTop = _current.offset().top - window.innerHeight;
if (countDuration == 0 && $(window).scrollTop() > toTop && _current.find('.counter-value').hasClass('active')) {
_current.find('.counter-value').each(function () {
var $this = $(this),
countTo = $this.attr('data-count');
countNum: $this.text();
$({
}).animate({
countNum: countTo
}, {
duration: 3000,
easing: 'swing',
step: function (now) {
$this.text(Math.ceil(now).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
},
complete: function () {
$this.stop();
}
});
$this.removeClass('active');
});
countDuration = 1;
}
});
}
}
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter