kessi-cpa Library logo (4.0 KB)

How to Make A Button With A Loading Spinner

Concept

When a user clicks on a button that performs some actions in the background, the page may take some time to load. While loading, a page remains static and the user is left wondering. Often, the user will take some other action such as refreshing the page or clicking somewhere else, therefore preventing the page from completing the background work. To solve this problem, we need to inform the user that the page is in the process of loading by displaying visual signals.

In this tutorial, we will create a button that displays a spinner while the page is loading.
For this project, we will use:
  • UpdatePanel: will be used to wrap the button and trigger a partial post-back when the button is clicked.
  • UpdateProgress: This UpdateProgress should have as AssociatedUpdatePanelID the above UpdatePanel. I set the updateProgress to trigger display after 500 milliseconds, and the DynamicLayout property to False, so prevent the layout from shifting when display is triggered.
  • Button: : the onserverclick event for this button triggers a server-side sub in vb.net. For the purpose of this tutorial and to simulate some kind of background work, we put the thread to sleep for 2 seconds.
  • Rotating icon: we will use a fontawesome spinner.

Note: for the download icon in the button example to properly display, you have to insert the following link in the head section of your page ("Font Awesome by Dave Gandy - http://fontawesome.io):
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

Example

Click the button SUBMIT and notice how the spinner is displayed while the background work is in progress.

The spinner will be hidden once the background work is completed and the page is fully loaded!

How To

1. Add HTML

<div style="padding: 10px;">
  <p>
    Click the button SUBMIT and notice how the spinner is displayed
    while the background work is in progress.
  </p>
  <p>
    The spinner will be hidden once the background work is completed
    and the page is fully loaded!
  </p>
  <asp:UpdatePanel ID="myUpdatePanel" runat="server">
    <ContentTemplate>
      <button id="btnSubmit" runat="server" onserverclick="Submit_Click" class="btnClassic">
        <table style="width: 100%;">
          <tr>
            <td style="width: 30px; text-align: center;">
              <asp:UpdateProgress ID="myUpdateProgress" runat="server" DisplayAfter="500"
                AssociatedUpdatePanelID="myUpdatePanel" DynamicLayout="False">
                <ProgressTemplate>
                  <i class="fa fa-spinner fa-spin" style="font-size: 26px; color: #f00;"></i>
                </ProgressTemplate>
              </asp:UpdateProgress>
            </td>
            <td style="text-align: center;">
              <span>SUBMIT</span>
            </td>
            <td style="width: 30px;">
            </td>
          </tr>
        </table>
      </button>
    </ContentTemplate>
  </asp:UpdatePanel>
</div>

2. Add CSS

body
{
    font-family: Segoe UI,'Helvetica Neue';
    Color: #666666;
    background-color: #fff;
    font-size: 18px;
}

*
{
    box-sizing: border-box;
}

.btnClassic
{
    font-size: 16px;
    width: 200px;
    height: 50px;
    cursor: pointer;
    transition: 0.3s;
}

3. Add JavaScript

<script runat="server">
    Protected Sub Submit_Click(sender As Object, e As EventArgs)
        Threading.Thread.Sleep(2000)
        ScriptManager.RegisterStartupScript(Me, Me.GetType(), "Submission", "submit()",True)
    End Sub
</script>

<script type="text/javascript">
    function submit() {
        try {
            window.alert("Successfully Submitted!")
        }
        catch (err) {
            window.alert(err.message);
        }
    }
</script>
js for dialogbox (39 kb)
Author of this article:
Mahmoud Kessi, CPA, CGA
mkessi@kessi-cpa.com
(204) 226-9576

Comments & Questions

Add New Comment or Question




Post

REPLY/COMMENT



Email Link


Link to be shared:

×

Confirmation

Copyright © 2016-2019 KESSITEK.