<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>
