Display animated spinner while loading modal dialog

The following javascript function SP.UI.ModalDialog.showModalDialog(options); is a way to display a modal dialog with specified dialog options. When you assign a value to the URL property of the dialog options, an IFRAME tag is rendered pointing to the appropriate URL.

ShowDialog example

var options = {
    title: "My Dialog Title",
    width: 400,
    height: 600,
    url: "/_layouts/DialogPage.aspx" };

SP.UI.ModalDialog.showModalDialog(options);

To display an animated spinner, you can set a background-image for the iframe with some CSS.

CSS

iframe
{
    background-image: url("../images/animatedspinner.gif");        
    background-repeat: no-repeat;     
    background-position: 50% 50%; 
}

Result