<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.