classic-vf-spin.vfp

<style>
  .load-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0.25;
        z-index: 1000;
        background-color: black;
    }
    .load-container {
        position: relative;
        z-index: 1001;
        width: 350px;
        margin: 0 auto;
    }
    .load-spin {
        background-color: #fff;
        margin: 0 auto;
    }
</style>

<apex:form id="form">

  <apex:actionStatus id="status">
      <apex:facet name="start">
          <div class="load-backdrop">
              &nbsp;
          </div>
          <div class="load-container">
              <div class="load-spin">
                  <img src="/img/loading.gif" style="float: left; margin: 8px;" />
                  <span style="display: inline-block; padding: 15px;">Please wait while your quote is being created...</span>
              </div>
          </div>
      </apex:facet>
  </apex:actionStatus>
  
  
  <apex:commandButton action="{!apexMethodName}"
                        value="Do Something"
                        styleClass="slds-vf-button_brand"
                        status="status"
                        rerender="form"/>
                    
                    
                    
 
  </apex:form>