How do I add a loading indicator to an onclick button function?

I'm new to most online code. (The page in question is written in cshtml) When a customer clicks a button on the item they want to purchase, I need a loading indicator (consistent with others) to start when button is clicked and end when downloading is complete. I am limited with what I can change since this program is humongous and updated by several of us in several locations. I have tried several different approaches to no avail. I even tried to make a new modal for the indicator, but I am way over my head here. I don't have any experience in Promise and that is what they are relying on here. Any help would be greatly appreciated. (Top section is button code, Bottom is indicator code)

<tbody data-bind="foreach: PurchaseItemsCAI">
   <tr>
     <td data-bind="text: Name"></td>
     <td data-bind="text: Description"></td>
     <td>
       <button type="button" class="btn btn-default btn-xs" data-bind="click: function ApplyPurchase() {
                     $root.MakePurchase(Name, Id)                                                                                                                                   
                     .then(function () {                                                                                                                                        
                          $('#make-purchase-modal').modal('hide');                                                                                                                                      
                          setTimeout(function () { $('.modal-backgroup').remove(); }, 500);                                                                                                                                     
                          });                                                                                                               
                 }">
            Apply
       </button>        
     </td>
   </tr>
</tbody>




<div class="modal-body">
           <div data-bind="ifnot: PurchaseModalLoaded">
               <div style="text-align: center;">
                   Loading Purchasable Items . . .
               </div>
               <div class="sk-spinner sk-spinner-five-bounce">
                    <div class="sk-bounce1"></div>
                        <div class="sk-bounce2"></div>
                        <div class="sk-bounce3"></div>
                        <div class="sk-bounce4"></div>
                        <div class="sk-bounce5"></div>
                   </div>
               </div>
           </div>