In response to a query in another topic... Feel free to add your own ideas below :)
I highly recommend googling "css spinner" because there are many lovely spinner and loader animations available. This is how I implemented the spinner:
---
Layout
1. Add a HTML element.
2. On the Basic tab, set the HTML to:
<div id="PDloader"></div>
3. On the Advanced tab, set the class to "PDloading"
CSS and Javascript
1. In CSS, add the following:
.PDloading {
position: fixed;
z-index: 999;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.PDloading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
#PDloader {
position: fixed;
left: 50%;
top: 50%;
z-index: 1;
margin: -40px 0 0 -40px;
border: 10px solid #f3f3f3;
border-radius: 50%;
border-top: 10px solid #3498db;
border-bottom: 10px solid #3498db;
width: 80px;
height: 80px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
2. At this point, there's enough completed to make to the spinner/loader visible. It will run stopped with a bit of JQuery. Forms 10.1 Update 2 has a neat new function that allows us to stop the spinner once the page has loaded and run all of the lookups triggered by the Forms URL Parameters. See Point 3. for other options.
Code to turn off the spinner:
//once the form has loaded and initial lookups have run, this section will execute
$(document).on("onloadlookupfinished", function () {
// the following line hides the spinner.
$('#PDloader, .PDloading').css('display' , 'none');
});
3. Perhaps you don't have 10.1 Update 2 OR you need to run the spinner when a lookup begins on the form. In my case, I have Lookup Rules which trigger Field Rules. Populating the data can take a while, so I use a spinner for that as well.
//this is the selector for my button
$('.autofill').on('click',function() {
//turn the spinner on.
$('#PDloader, .PDloading').css('display' , 'block');
//this waits 5 seconds then disables the spinner.
setTimeout(
function() {
$('#PDloader, .PDloading').css('display' , 'none');
}, 5000
);
});