diff --git a/wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js b/wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js
index b8de0d1317..fd7d272c50 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js
+++ b/wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js
@@ -332,7 +332,9 @@ $(function() {
     });
 
     /* Set up behaviour of preview button */
-    $('.action-preview').click(function() {
+    $('.action-preview').click(function(e) {        
+        e.preventDefault();
+        
         var previewWindow = window.open($(this).data('placeholder'), $(this).data('windowname'));
 
         $.ajax({
@@ -349,9 +351,10 @@ $(function() {
                     frame.document.write(data);                 
                     frame.document.close();
 
-                    var removeTimeout = setTimeout(function(){
+                    var hideTimeout = setTimeout(function(){
                         pdoc.getElementById('loading-spinner-wrapper').className += 'remove';
-                    }, 100) /* just enough to give effect without adding discernible slowness */
+                        clearTimeout(hideTimeout);
+                    }, 50) // just enough to give effect without adding discernible slowness
                 } else {
                     previewWindow.close();
                     document.open();
@@ -365,11 +368,11 @@ $(function() {
                 error output rather than giving a 'friendly' error message so that
                 developers can debug template errors. (On a production site, we'd
                 typically be serving a friendly custom 500 page anyhow.) */
+
                 previewWindow.document.open();
                 previewWindow.document.write(xhr.responseText);
                 previewWindow.document.close();
             }
         });
-        return false;
     });
 });
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/preview.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/preview.scss
new file mode 100644
index 0000000000..a655eddfbd
--- /dev/null
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/preview.scss
@@ -0,0 +1,86 @@
+@import "../variables.scss";
+@import "../mixins.scss";
+
+/* This font is just a single spinner glyph */
+@font-face {
+    font-family: 'wagtail';
+    src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggiBucAAAC8AAAAYGNtYXAAIwC5AAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zu2pTysAAAFwAAAA0GhlYWQAoBqvAAACQAAAADZoaGVhA+IB5gAAAngAAAAkaG10eAMAAAAAAAKcAAAAFGxvY2EAKAB8AAACsAAAAAxtYXhwAAgAMwAAArwAAAAgbmFtZTAOqMkAAALcAAABOXBvc3QAAwAAAAAEGAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAABAAAAAMQHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIAAx//3//wAAAAAAIAAx//3//wAB/+P/0wADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAgAA/+ACAAHgABcAMAAANy4DNTQ+Ah8BByYOAhUUHgIXBxcnNz4DJzYuAic/AR4DBxYOAiNLEhwTCihGXTUgIChGNB4HDxQOKLAhISdHMx8BAQgOFQ0mBxEdEgsBASlFXjQrEiouMRo0XkUpAR8hAR8zRycUJCQeDwR0IR8BHTVFKRImIiANBSgSKi4xGjVdRigAAAEAAAABAADi0eQAXw889QALAgAAAAAAz8Bs+QAAAADPwGz5AAD/4AIAAeAAAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAAgAAAQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAABAAAAAgAAAAAAAAAACgAUAB4AaAABAAAABQAxAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoAKABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoAKABjAHcAYQBnAHQAYQBpAGwAVgBlAHIAcwBpAG8AbgAgADEALgAwAHcAYQBnAHQAYQBpAGx3YWd0YWlsAHcAYQBnAHQAYQBpAGwAUgBlAGcAdQBsAGEAcgB3AGEAZwB0AGEAaQBsAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'),
+         url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAARsAAoAAAAABCQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAO4AAADuSyBzg09TLzIAAAHkAAAAYAAAAGAIIgbnY21hcAAAAkQAAABMAAAATAAjALlnYXNwAAACkAAAAAgAAAAIAAAAEGhlYWQAAAKYAAAANgAAADYAoBqvaGhlYQAAAtAAAAAkAAAAJAPiAeZobXR4AAAC9AAAABQAAAAUAwAAAG1heHAAAAMIAAAABgAAAAYABVAAbmFtZQAAAxAAAAE5AAABOTAOqMlwb3N0AAAETAAAACAAAAAgAAMAAAEABAQAAQEBCHdhZ3RhaWwAAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAAB0Dx0AAAB5ER0AAAAJHQAAAOUSAAYBAQgPERMWGXdhZ3RhaWx3YWd0YWlsdTB1MXUyMHUzMQAAAgGJAAMABQEBBAcKDWT8lA78lA78lA77lA7WthVbu3DMi8+L9yH3B/cH9yGLCKtra2sFIYs1NYshi1ifWq9nCGSGBfdD+wcVa6urqwX1i+Hhi/WLvne8Z68IspCRswW7W6ZKi0eL+yH7B/sH+yGLCA74lBT4lBWLDAoAAAADAgABkAAFAAABTAFmAAAARwFMAWYAAAD1ABkAhAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAEAAAAAxAeD/4P/gAeAAIAAAAAEAAAAAAAAAAAAAACAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAOAAAAAoACAACAAIAAQAgADH//f//AAAAAAAgADH//f//AAH/4//TAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAQAAaXw/5l8PPPUACwIAAAAAAM/AbPkAAAAAz8Bs+QAA/+ACAAHgAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAIAAAEAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAQAAAAIAAAAAAFAAAAUAAAAAAA4ArgABAAAAAAABAA4AAAABAAAAAAACAA4ARwABAAAAAAADAA4AJAABAAAAAAAEAA4AVQABAAAAAAAFABYADgABAAAAAAAGAAcAMgABAAAAAAAKACgAYwADAAEECQABAA4AAAADAAEECQACAA4ARwADAAEECQADAA4AJAADAAEECQAEAA4AVQADAAEECQAFABYADgADAAEECQAGAA4AOQADAAEECQAKACgAYwB3AGEAZwB0AGEAaQBsAFYAZQByAHMAaQBvAG4AIAAxAC4AMAB3AGEAZwB0AGEAaQBsd2FndGFpbAB3AGEAZwB0AGEAaQBsAFIAZQBnAHUAbABhAHIAdwBhAGcAdABhAGkAbABHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+html,body {
+    height:100%;
+    padding:0;
+    margin:0;
+}
+
+#loading-spinner-wrapper{
+    position:fixed;
+    bottom:0;
+    text-align:center;
+    height:100%;
+    width:100%;
+    font-size:0em;
+    z-index:999999;
+    background:white;
+    @include transition(all 0.3s ease);
+
+    &.remove{
+        bottom:-100%;
+    }
+
+    &:before {
+        content: '';
+        width:0px;
+        display: inline-block;
+        height: 100%;
+        vertical-align: middle;
+        margin-left:-0.4em;
+    }
+}
+
+#loading-spinner{
+    position:relative;
+    display:inline-block;
+    width:120px;
+    height:120px;
+    vertical-align:middle;
+
+    &:after{
+        font-size:120px;
+        line-height:120px;
+        color:$color-teal;
+        position:absolute;
+        left:0;
+        top:0;
+        font-family:wagtail;
+        content:"1";
+        width:1em;
+        animation: spin 0.8s infinite linear;
+        -webkit-animation: spin 0.8s infinite linear;
+        -moz-animation: spin 0.8s infinite linear;   
+    }
+}
+
+#preview-frame{
+    height:100%;
+    width:100%;
+    position:absolute;
+    z-index:1;
+    border:0;
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+@-webkit-keyframes spin {
+    from { -webkit-transform: rotate(0deg); }
+    to { -webkit-transform: rotate(360deg); }
+}
+@-moz-keyframes spin {
+    from { -moz-transform: rotate(0deg); }
+    to { -moz-transform: rotate(360deg); }
+}
\ No newline at end of file
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/pages/preview.html b/wagtail/wagtailadmin/templates/wagtailadmin/pages/preview.html
index 3cacb7d104..d5c4b7a51c 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/pages/preview.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/pages/preview.html
@@ -1,93 +1,13 @@
 <!DOCTYPE HTML>
-{% load static %}
+{% load static compress i18n %}
 <html>
     <head>
-        <title>Preview loading...</title>
-        <style>
-            /* This font is just a single spinner glyph */
-            @font-face {
-                font-family: 'wagtail';
-                src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggiBucAAAC8AAAAYGNtYXAAIwC5AAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zu2pTysAAAFwAAAA0GhlYWQAoBqvAAACQAAAADZoaGVhA+IB5gAAAngAAAAkaG10eAMAAAAAAAKcAAAAFGxvY2EAKAB8AAACsAAAAAxtYXhwAAgAMwAAArwAAAAgbmFtZTAOqMkAAALcAAABOXBvc3QAAwAAAAAEGAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAABAAAAAMQHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIAAx//3//wAAAAAAIAAx//3//wAB/+P/0wADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAgAA/+ACAAHgABcAMAAANy4DNTQ+Ah8BByYOAhUUHgIXBxcnNz4DJzYuAic/AR4DBxYOAiNLEhwTCihGXTUgIChGNB4HDxQOKLAhISdHMx8BAQgOFQ0mBxEdEgsBASlFXjQrEiouMRo0XkUpAR8hAR8zRycUJCQeDwR0IR8BHTVFKRImIiANBSgSKi4xGjVdRigAAAEAAAABAADi0eQAXw889QALAgAAAAAAz8Bs+QAAAADPwGz5AAD/4AIAAeAAAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAAgAAAQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAABAAAAAgAAAAAAAAAACgAUAB4AaAABAAAABQAxAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoAKABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoAKABjAHcAYQBnAHQAYQBpAGwAVgBlAHIAcwBpAG8AbgAgADEALgAwAHcAYQBnAHQAYQBpAGx3YWd0YWlsAHcAYQBnAHQAYQBpAGwAUgBlAGcAdQBsAGEAcgB3AGEAZwB0AGEAaQBsAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'),
-                     url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAARsAAoAAAAABCQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAO4AAADuSyBzg09TLzIAAAHkAAAAYAAAAGAIIgbnY21hcAAAAkQAAABMAAAATAAjALlnYXNwAAACkAAAAAgAAAAIAAAAEGhlYWQAAAKYAAAANgAAADYAoBqvaGhlYQAAAtAAAAAkAAAAJAPiAeZobXR4AAAC9AAAABQAAAAUAwAAAG1heHAAAAMIAAAABgAAAAYABVAAbmFtZQAAAxAAAAE5AAABOTAOqMlwb3N0AAAETAAAACAAAAAgAAMAAAEABAQAAQEBCHdhZ3RhaWwAAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAAB0Dx0AAAB5ER0AAAAJHQAAAOUSAAYBAQgPERMWGXdhZ3RhaWx3YWd0YWlsdTB1MXUyMHUzMQAAAgGJAAMABQEBBAcKDWT8lA78lA78lA77lA7WthVbu3DMi8+L9yH3B/cH9yGLCKtra2sFIYs1NYshi1ifWq9nCGSGBfdD+wcVa6urqwX1i+Hhi/WLvne8Z68IspCRswW7W6ZKi0eL+yH7B/sH+yGLCA74lBT4lBWLDAoAAAADAgABkAAFAAABTAFmAAAARwFMAWYAAAD1ABkAhAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAEAAAAAxAeD/4P/gAeAAIAAAAAEAAAAAAAAAAAAAACAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAOAAAAAoACAACAAIAAQAgADH//f//AAAAAAAgADH//f//AAH/4//TAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAQAAaXw/5l8PPPUACwIAAAAAAM/AbPkAAAAAz8Bs+QAA/+ACAAHgAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAIAAAEAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAQAAAAIAAAAAAFAAAAUAAAAAAA4ArgABAAAAAAABAA4AAAABAAAAAAACAA4ARwABAAAAAAADAA4AJAABAAAAAAAEAA4AVQABAAAAAAAFABYADgABAAAAAAAGAAcAMgABAAAAAAAKACgAYwADAAEECQABAA4AAAADAAEECQACAA4ARwADAAEECQADAA4AJAADAAEECQAEAA4AVQADAAEECQAFABYADgADAAEECQAGAA4AOQADAAEECQAKACgAYwB3AGEAZwB0AGEAaQBsAFYAZQByAHMAaQBvAG4AIAAxAC4AMAB3AGEAZwB0AGEAaQBsd2FndGFpbAB3AGEAZwB0AGEAaQBsAFIAZQBnAHUAbABhAHIAdwBhAGcAdABhAGkAbABHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');
-                font-weight: normal;
-                font-style: normal;
-            }
-            html,body {
-                height:100%;
-                padding:0;
-                margin:0;
-            }
-
-            #loading-spinner-wrapper{
-                position:fixed;
-                bottom:0;
-                text-align:center;
-                height:100%;
-                width:100%;
-                font-size:0em;
-                z-index:999999;
-                background:white;
-                -webkit-transition: all 0.3s ease;
-                   -moz-transition: all 0.3s ease;
-                     -o-transition: all 0.3s ease;
-                        transition: all 0.3s ease;   
-            }
-                #loading-spinner-wrapper.remove{
-                    bottom:-100%;
-                }
-                #loading-spinner-wrapper:before {
-                    content: '';
-                    width:0px;
-                    display: inline-block;
-                    height: 100%;
-                    vertical-align: middle;
-                    margin-left:-0.4em;
-                }
-                #loading-spinner{
-                    position:relative;
-                    display:inline-block;
-                    width:120px;
-                    height:120px;
-                    vertical-align:middle;
-                }
-                    #loading-spinner:after{
-                        font-size:120px;
-                        line-height:120px;
-                        color:#43b1b0;
-                        position:absolute;
-                        left:0;
-                        top:0;
-                        font-family:wagtail;
-                        content:"1";
-                        width:1em;
-                        animation: spin 0.8s infinite linear;
-                        -webkit-animation: spin 0.8s infinite linear;
-                        -moz-animation: spin 0.8s infinite linear;   
-                    }
-            
-            #preview-frame{
-                height:100%;
-                width:100%;
-                position:absolute;
-                z-index:1;
-                border:0;
-            }
-
-            @keyframes spin {
-                from { transform: rotate(0deg); }
-                to { transform: rotate(360deg); }
-            }
-            @-webkit-keyframes spin {
-                from { -webkit-transform: rotate(0deg); }
-                to { -webkit-transform: rotate(360deg); }
-            }
-            @-moz-keyframes spin {
-                from { -moz-transform: rotate(0deg); }
-                to { -moz-transform: rotate(360deg); }
-            }
-        </style>
+        <title>{% trans "Preview" %}</title>
+        {% compress css %}
+            <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/layouts/preview.scss" type="text/x-scss" />
+        {% endcompress %}
     </head>
-    <body>
+    <body class="ready">
         <div id="loading-spinner-wrapper">
             <div id="loading-spinner"></div>
         </div>