Bootstrap Fancy Social Network Counts


	<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="list-group">
                <a href="javascript:;" class="list-group-item visitor">
                    <h3 class="pull-right">
                        <i class="fa fa-eye"></i>
                    </h3>
                    <h4 class="list-group-item-heading count">
                        1000</h4>
                    <p class="list-group-item-text">
                        Profile Views</p>
                </a><a href="javascript:;" class="list-group-item facebook-like">
                    <h3 class="pull-right">
                        <i class="fa fa-facebook-square"></i>
                    </h3>
                    <h4 class="list-group-item-heading count">
                        1000</h4>
                    <p class="list-group-item-text">
                        Facebook Likes</p>
                </a><a href="javascript:;" class="list-group-item google-plus">
                    <h3 class="pull-right">
                        <i class="fa fa-google-plus-square"></i>
                    </h3>
                    <h4 class="list-group-item-heading count">
                        1000</h4>
                    <p class="list-group-item-text">
                        Google+</p>
                </a><a href="javascript:;" class="list-group-item twitter">
                    <h3 class="pull-right">
                        <i class="fa fa-twitter-square"></i>
                    </h3>
                    <h4 class="list-group-item-heading count">
                        1000</h4>
                    <p class="list-group-item-text">
                        Twitter Followers</p>
                </a>
            </div>
        </div>
        <div class="col-md-3">
            <div class="list-group">
                <a href="javascript:;" class="list-group-item tumblr">
                    <h3 class="pull-right">
                        <i class="fa fa-tumblr-square"></i>
                    </h3>
                    <h4 class="list-group-item-heading count">
                        1000</h4>
                    <p class="list-group-item-text">
                        Tumblr</p>
                    <a href="javascript:;" class="list-group-item linkedin">
                        <h3 class="pull-right">
                            <i class="fa fa-linkedin-square"></i>
                        </h3>
                        <h4 class="list-group-item-heading count">
                            1000</h4>
                        <p class="list-group-item-text">
                            Linkedin</p>
                    </a></a><a href="javascript:;" class="list-group-item youtube">
                        <h3 class="pull-right">
                            <i class="fa fa-youtube-play"></i>
                        </h3>
                        <h4 class="list-group-item-heading count">
                            1000</h4>
                        <p class="list-group-item-text">
                            Youtub Play</p>
                    </a><a href="javascript:;" class="list-group-item vimeo">
                        <h3 class="pull-right">
                            <i class="fa fa-vimeo-square"></i>
                        </h3>
                        <h4 class="list-group-item-heading count">
                            1000</h4>
                        <p class="list-group-item-text">
                            Vimeo</p>
                    </a>
            </div>
        </div>
    </div>
</div>

	<script type="text/javascript"></script>

    @import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css");
body { margin-top:20px; }
.fa { font-size: 50px;text-align: right;position: absolute;top: 7px;right: 27px;outline: none; }
a { transition: all .3s ease;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease; }
/* Visitor */
a.visitor i,.visitor h4.list-group-item-heading { color:#E48A07; }
a.visitor:hover { background-color:#E48A07; }
a.visitor:hover * { color:#FFF; }
/* Facebook */
a.facebook-like i,.facebook-like h4.list-group-item-heading { color:#3b5998; }
a.facebook-like:hover { background-color:#3b5998; }
a.facebook-like:hover * { color:#FFF; }
/* Google */
a.google-plus i,.google-plus h4.list-group-item-heading { color:#dd4b39; }
a.google-plus:hover { background-color:#dd4b39; }
a.google-plus:hover * { color:#FFF; }
/* Twitter */
a.twitter i,.twitter h4.list-group-item-heading { color:#00acee; }
a.twitter:hover { background-color:#00acee; }
a.twitter:hover * { color:#FFF; }
/* Linkedin */
a.linkedin i,.linkedin h4.list-group-item-heading { color:#0e76a8; }
a.linkedin:hover { background-color:#0e76a8; }
a.linkedin:hover * { color:#FFF; }
/* Tumblr */
a.tumblr i,.tumblr h4.list-group-item-heading { color:#34526f; }
a.tumblr:hover { background-color:#34526f; }
a.tumblr:hover * { color:#FFF; }
/* Youtube */
a.youtube i,.youtube h4.list-group-item-heading { color:#c4302b; }
a.youtube:hover { background-color:#c4302b; }
a.youtube:hover * { color:#FFF; }
/* Vimeo */
a.vimeo i,.vimeo h4.list-group-item-heading { color:#44bbff; }
a.vimeo:hover { background-color:#44bbff; }
a.vimeo:hover * { color:#FFF; }
    

	// Animate the element's value from x to y:
$({ someValue: 0 }).animate({ someValue: Math.floor(Math.random() * 3000) }, {
    duration: 3000,
    easing: 'swing', // can be anything
    step: function () { // called on every step
        // Update the element's text with rounded-up value:
        $('.count').text(commaSeparateNumber(Math.round(this.someValue)));
    }
});

function commaSeparateNumber(val) {
    while (/(\d+)(\d{3})/.test(val.toString())) {
        val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
    }
    return val;
}