diff --git a/wp-admin/css/wp-admin.dev.css b/wp-admin/css/wp-admin.dev.css index 94a307b29..bb1676ad9 100644 --- a/wp-admin/css/wp-admin.dev.css +++ b/wp-admin/css/wp-admin.dev.css @@ -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 { diff --git a/wp-includes/js/customize-loader.dev.js b/wp-includes/js/customize-loader.dev.js index 759e255c5..9eb5794df 100644 --- a/wp-includes/js/customize-loader.dev.js +++ b/wp-includes/js/customize-loader.dev.js @@ -50,8 +50,10 @@ if ( typeof wp === 'undefined' ) if ( this.active ) return; this.active = true; + this.body.addClass('customize-loading'); this.iframe = $( '