Ajax call with Ladda js

1. Add Jquery library in head section

    <script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>

2. Then add css for button

<link rel="stylesheet" href="Style/ladda.min.css" />

 

3. Add script to head section

<script type="text/javascript">

        function ShowCurrentTime() {

            var l = Ladda.create(document.querySelector('.ladda-button'));

            l.start();

            l.isLoading();

            l.setProgress(0 - 1);

            $.ajax({

                type: "POST",

                url: "Test.aspx/GetCurrentTime",

                data: '{name: "' + $("#<%=txtUserName.ClientID%>")[0].value + '" }',

             contentType: "application/json; charset=utf-8",

             dataType: "json",

             success: OnSuccess,

             failure: function (response) {

                 alert(response.d);

                 l.stop();

             }

         });

     }

        function OnSuccess(response) {

            var l = Ladda.create(document.querySelector('.ladda-button'));

         alert(response.d);

         l.stop();

     }

    </script>

4. Then add this code to body section

<form id="form1" runat="server">

        <div>

            Your Name :

            <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>

            <button class="ladda-button" runat="server" id="btn" data-color="mint" onclick="ShowCurrentTime()" data-style="expand-right" data-size="s">Submit</button>

        </div>

    </form>

    <script src="js/spin.min.js"></script>

    <script src="js/ladda.min.js"></script>

#. Download the ladda js and css files from below link

Download