<div style="max-width: 600px; margin: 0 auto;">
  ...
  
  <!-- Cognito Forms Embed Code -->
  <div class="cognito">
    <script src="https://services.cognitoforms.com/s/VSqLsE7970G2a-Ir3-x6cg"></script>
    <script>Cognito.load("forms", { id: "116" });</script>
    <div class="preloader">
      <img src="https://www.cognitoforms.com/Content/Images/apple-icon.png" />
    </div>
  </div>
  <!-- End of Embed Code -->
  
  ...
</div>
/* Set the preloader to be invisible by default */
.preloader {
  display: none;
  
}

/* Override the default invisibility if the preloader doesn't have a form after it. */
.preloader:last-child {
  display: block;
}

/* Create a spinning animation and name it "spin" */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  
  to {
    transform: rotate(360deg);
  }
}

/* 
  Apply "spin" animation to the image inside the preloader.
   -  animation-duration is set to "3s" and so each 
      rotation will last 3 seconds.
   -  animation-timing-function is set to "linear" 
      and so the speed of rotation is constant.
   -  animation-iteration-count is set to "infinite"
      which means what it says.
*/
.preloader img {
  display: block;
  animation-name: spin;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.