Answers.Body: <p>You can add the class "crm-loading-element" to the element, and then in your ajax success handler remove the class.</p>
  
  <p>If you want the actual CiviCRM logo, you can add both the classes "blockUI blockOverlay" instead, but depending on the field size it may look off. The other one seems to fit better.</p>
  
  <p>If you want the screen to gray out the way some of the popups do, you can do:</p>
  
  <p><code>CRM.$.blockUI(CRM.$('div.something').addClass('blockUI').addClass('blockOverlay'));</code></p>
  
  <p>where div.something is just some larger div surrounding your form, but somewhere within div#crm-container, then your ajax success handler remove it with:</p>
  
  <p><code>CRM.$.unblockUI(CRM.$('div.something').removeClass('blockUI').removeClass('blockOverlay'));</code></p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-02-13T03:05:39.173Z
Answers.LastActivityDate: 2019-02-13T17:31:12.207Z
Answers.LastEditDate: 2019-02-13T17:31:12.207Z
Answers.UserDisplayName: Demerit
Body: <p>My extension places a field on a page that loads data via AJAX from the database.  The field appears blank until the data is loaded.  How can I show the CiviCRM spinning logo if my data isn't loaded yet?</p>
  
Tags: <extension><developer>
Title: How do I use the CiviCRM "spinner" in an extension?
ThreadText: # How do I use the CiviCRM "spinner" in an extension?
  
  (Asked by: username_0 on 2019-02-12)
  
  My extension places a field on a page that loads data via AJAX from the database. The field appears blank until the data is loaded. How can I show the CiviCRM spinning logo if my data isn't loaded yet?
  
  **Tags:** extension, developer
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2019-02-13. Score: 1 | Accepted answer
  
  You can add the class "crm-loading-element" to the element, and then in your ajax success handler remove the class.
  
  If you want the actual CiviCRM logo, you can add both the classes "blockUI blockOverlay" instead, but depending on the field size it may look off. The other one seems to fit better.
  
  If you want the screen to gray out the way some of the popups do, you can do:
  
  `CRM.$.blockUI(CRM.$('div.something').addClass('blockUI').addClass('blockOverlay'));`
  
  where div.something is just some larger div surrounding your form, but somewhere within div#crm-container, then your ajax success handler remove it with:
  
  `CRM.$.unblockUI(CRM.$('div.something').removeClass('blockUI').removeClass('blockOverlay'));`
  
  
  ---
  
  