I want to know that in my web application, the user clicks to the menu, It's buffering sometimes to load the page.

So the Theme I used to create the system has inbuild animation for that. How I can trigger this when loading until the page completely loads to view.

This is the animation

 <div id="loading" class="overlay"><i class="fas fa-2x fa-sync-alt fa-spin"></i></div>

This is currently how I placed it on the page.

<div class="card">
  <div class="card-header">
    <h3 class="card-title">
      <b>Company List</b>
    </h3>
  </div>
  <div id="loading" class="overlay">
    <i class="fas fa-2x fa-sync-alt fa-spin"></i>
  </div>
  <!-- /.card-header -->
  <div class="card-body p-0">
    <table class="table table-striped">
      <tr>
        <th> Company Name </th>
        <th> @Html.DisplayNameFor(model => model.Status) </th>
        <th></th>
      </tr>
      <tbody> @foreach (var item in Model) { <tr>
          <td> @Html.DisplayFor(modelItem => item.CompanyName) </td>
          <td> @Html.DisplayFor(modelItem => item.Status) </td>
          <td> @Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { @class = "btn btn-warning pull-right" }) @Html.ActionLink("View", "Details", new { id = item.Id }, new { @class = "btn btn-success pull-right" }) @Html.ActionLink("Delete", "Delete", new { id = item.Id }, new { @class = "btn btn-danger pull-right" }) </td>
        </tr> } </tbody>
    </table>
  </div>
  <!-- /.card-body -->
</div>

I Used this JQuery

<script>
    $(window).load(function () {
        $('#loading').hide();
    });
</script>