Display Animated Number Counter from Zero To Value in ASP.Net DataList using jQuery

Hi nauna,

Check this example to display the rolling animation.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
    $(function () {
        $('.count').each(function () {
            $(this).prop('Counter', 0).animate({
                Counter: $(this).text()
            }, {
                duration: 3000,
                easing: 'swing',
                step: function (now) {
                    $(this).text(Math.ceil(now));
                }
            });
        });
    });
</script>
<asp:ListView ID="ListView1" runat="server">
    <ItemTemplate>
        <asp:Label ID="lblid" runat="server" Text=' <%# Eval("platformid") %>' Visible="false"></asp:Label>
        <div class="col-md-3 col-xs-6">
            <div class="category">
                <div class="imgbox">
                    <asp:Image ID="promoterimage" runat="server" Height="50px" Width="50px" ImageUrl='<%# Eval("icon") %>' />
                </div>
                <h4>
                    <asp:Label ID="lblplatform" runat="server" Text='<%# Eval("platformname") %>'></asp:Label>
                    <br />
                    <small>
                        <asp:Label ID="lblcount" runat="server" CssClass="extra-bold count" Text='<%# Eval("count") %>'></asp:Label>
                    </small>
                </h4>
            </div>
        </div>
    </ItemTemplate>
</asp:ListView>

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.AddRange(new System.Data.DataColumn[] { 
                        new System.Data.DataColumn("platformid", typeof(int)),
                        new System.Data.DataColumn("platformname", typeof(string)),
                        new System.Data.DataColumn("icon",typeof(string)),
                        new System.Data.DataColumn("count",typeof(int))});
        dt.Rows.Add(1, "Platform A", "~/Icon/A.png", 300);
        dt.Rows.Add(2, "Platform C", "~/Icon/calender.png", 1200);
        dt.Rows.Add(3, "Platform P", "~/Icon/P.png", 800);
        ListView1.DataSource = dt;
        ListView1.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As System.Data.DataTable = New System.Data.DataTable()
        dt.Columns.AddRange(New System.Data.DataColumn() {
                            New System.Data.DataColumn("platformid", GetType(Integer)),
                            New System.Data.DataColumn("platformname", GetType(String)),
                            New System.Data.DataColumn("icon", GetType(String)),
                            New System.Data.DataColumn("count", GetType(Integer))})
        dt.Rows.Add(1, "Platform A", "~/Icon/A.png", 300)
        dt.Rows.Add(2, "Platform C", "~/Icon/calender.png", 1200)
        dt.Rows.Add(3, "Platform P", "~/Icon/P.png", 800)
        ListView1.DataSource = dt
        ListView1.DataBind()
    End If
End Sub

Screenshot