JSFiddle - React, Tailwind, and code Playground

HTML

<div class="TicketsCount"><div class="TicketsTitle">Helpdesk-Tickets</div><div class="TicketsTotalTitle">Gesamt:</div><div class="TicketsTotalCount"></div><div class="TicketsCurrentTitle">Aktuell:</div><div class="TicketsCurrentCount"></div><div class="TicketsLastTitle">(2012: 9767)</div></div>
<p><br /></p>
<div class="RequestsCount"><div class="RequestsTitle">Bedarfsanforderungen</div><div class="RequestsTotalTitle">Gesamt:</div><div class="RequestsTotalCount"></div><div class="RequestsCurrentTitle">Aktuell:</div><div class="RequestsCurrentCount"></div><div class="RequestsLastTitle">(2012: 3250)</div></div>

CSS

.counter-digit0 { background-position: 0  0; }
.counter-digit1 { background-position: 0 -120px; }
.counter-digit2 { background-position: 0 -240px; }
.counter-digit3 { background-position: 0 -360px; }
.counter-digit4 { background-position: 0 -480px; }
.counter-digit5 { background-position: 0 -600px; }
.counter-digit6 { background-position: 0 -720px; }
.counter-digit7 { background-position: 0 -840px; }
.counter-digit8 { background-position: 0 -960px; }
.counter-digit9 { background-position: 0 -1080px; }

.TicketsCount, .RequestsCount {
	position:relative;
	width:150px;
	height:150px;
	background-image:url(http://projects.harter-web.de/sharepoint/images/counter_background.png);
	font-size: 12px;
	font-weight: bold;
}
.TicketsTitle, .RequestsTitle {
	position: absolute;
	bottom: 13px;
	width: 150px;
	text-align: center;
}
.TicketsTotalTitle, .RequestsTotalTitle {
	position: absolute;
	top: 18px;
	left: 15px;
}
.TicketsTotalCount, .RequestsTotalCount {
	position: absolute;
	top: 35px;
	left: 30px;
}
.TicketsCurrentTitle, .RequestsCurrentTitle {
	position: absolute;
	top: 65px;
	left: 15px;
}
.TicketsCurrentCount, .RequestsCurrentCount {
	position: absolute;
	top: 82px;
	left: 30px;
}
.TicketsLastTitle, .RequestsLastTitle {
	position: absolute;
	top: 103px;
	left: 30px;
	font-weight: normal;
	font-size: 11px;
}

JavaScript

$(document).ready(function(){
counter("31505", "div.TicketsTotalCount", 150);
counter("570", "div.TicketsCurrentCount", 150);
counter("5000", "div.RequestsTotalCount", 150);
counter("980", "div.RequestsCurrentCount", 150);

function counter(count, target, delay) {
// separate digits
var digits = count.split( '' );
// set some animation interval
interval = delay;

// create spans for each digit,
// append to div#number and initialize animation
digits.forEach( function( value, index ) {
    // create a span with initial conditions
    var span = $( '<span>', {
        'class': 'counter-digit0',
        'data': {
            'current': -1,
            'goal' : value
        }
    } );
    // append span to the div#number
    span.appendTo( $( target ) );
    // call countUp after interval multiplied by the index of this span
    setTimeout( function() { countUp.call( span ); }, index * interval );
} );
}
// count animation function
function countUp()
{
    // the current span we're dealing with
    var span = this;
    // the current value of the span
    var current = span.data( 'current' );
    // the end goal digit of this span
    var goal = span.data( 'goal' );

    // increment the digit, if we've not reached the goal yet
    if( current < goal )
    {
        ++current;
        span.attr( 'class', 'counter-digit' + current );
		span.attr("style", "display: inline-block; height: 20px; line-height: 40px; width: 14px; vertical-align: middle; text-align: center; font: 0/0 a; text-shadow: none; background-image: url(http://projects.harter-web.de/sharepoint/images/jquery.counter-analog.png); color: transparent; margin: 0;");
        span.data( 'current', current );

        // call countUp again after interval
        setTimeout( function() { countUp.call( span ); }, interval );
    }
}

});