Theme Customizer: Add basic loading indicator when loading the customizer inside an iframe. see #19910.

git-svn-id: http://core.svn.wordpress.org/trunk@20743 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
koopersmith 2012-05-08 23:37:05 +00:00
parent 484bf6e4ef
commit d5d0a73719
2 changed files with 20 additions and 1 deletions

View File

@ -5324,11 +5324,25 @@ body.full-overlay-active {
display: block;
}
.customize-loading #customize-container iframe {
opacity: 0;
}
.customize-loading #customize-container {
background: #fff url("../images/wpspin_light.gif") no-repeat fixed center center;
}
#customize-container iframe,
#theme-installer iframe {
height: 100%;
width: 100%;
z-index: 20;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}
#customize-container .collapse-sidebar {

View File

@ -50,8 +50,10 @@ if ( typeof wp === 'undefined' )
if ( this.active )
return;
this.active = true;
this.body.addClass('customize-loading');
this.iframe = $( '<iframe />', { src: src }).appendTo( this.element );
this.iframe.one( 'load', this.loaded );
// Create a postMessage connection with the iframe.
this.messenger = new api.Messenger( src, this.iframe[0].contentWindow );
@ -92,8 +94,11 @@ if ( typeof wp === 'undefined' )
Loader.messenger.destroy();
Loader.iframe = null;
Loader.messenger = null;
Loader.body.removeClass( 'customize-active full-overlay-active' );
Loader.body.removeClass( 'customize-active full-overlay-active' ).removeClass( 'customize-loading' );
});
},
loaded: function() {
Loader.body.removeClass('customize-loading');
}
};