diff --git a/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html b/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html
index 8506e9075..113874dd9 100644
--- a/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html
+++ b/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html
@@ -1,7 +1,5 @@
 {% extends "wagtailadmin/base.html" %}
-{% load wagtailadmin_tags %}
-{% load compress i18n %}
-{% load gravatar %}
+{% load wagtailadmin_tags compress i18n static gravatar %}
 
 {% block extra_css %}
     {% compress css %}
@@ -345,6 +343,13 @@
             <div class="status-tag primary">Primary tag</div>
 
             <div class="status-tag">Secondary tag</div>
+
+            <h3>Loading mask</h3>
+            <p>Add the following <code>div</code> around any items you wish to display with a spinner overlay and fading out</p>
+            <p>Remove the "loading" class to disable the effect</p>
+            <div class="loading-mask loading" style="width:200px">
+                <img src="{% static 'wagtailadmin/images/wagtail-logo.svg' %}" width="200" />
+            </div>
         </section>
 
         <section id="icons">
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/js/vendor/jquery.ba-throttle-debounce.min.js b/wagtail/wagtailadmin/static/wagtailadmin/js/vendor/jquery.ba-throttle-debounce.min.js
new file mode 100644
index 000000000..07205508e
--- /dev/null
+++ b/wagtail/wagtailadmin/static/wagtailadmin/js/vendor/jquery.ba-throttle-debounce.min.js
@@ -0,0 +1,9 @@
+/*
+ * jQuery throttle / debounce - v1.1 - 3/7/2010
+ * http://benalman.com/projects/jquery-throttle-debounce-plugin/
+ * 
+ * Copyright (c) 2010 "Cowboy" Ben Alman
+ * Dual licensed under the MIT and GPL licenses.
+ * http://benalman.com/about/license/
+ */
+(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);
\ No newline at end of file
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss
index b6f5ca03c..343096a5a 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss
@@ -194,12 +194,50 @@ a.tag:hover{
     }
 }
 
+/* Loading mask: overlays a certain area with a loading spinner and a faded out cover to prevent interaction */
+.loading-mask{
+    &.loading{
+        position:relative;
+
+        &:before, &:after{
+            position:absolute;
+            display:block;
+        }
+
+        &:before{
+            content:"";
+            top:-5px;left:-5px;bottom:-5px;right:-5px;
+            z-index:1;
+            background-color:rgba(255,255,255,0.5);
+        }
+        &:after{
+            font-size:30px;
+            width:30px;
+            line-height:30px;
+            left:50%;
+            top:50%;
+            margin:-15px 0 0 -15px;
+            font-family:wagtail;
+            animation: spin 0.5s infinite linear;
+            -webkit-animation: spin 0.5s infinite linear;
+            -moz-animation: spin 0.5s infinite linear;
+            content:"1";
+            z-index:2;
+            color:$color-teal;
+        }
+    }
+}
+
 
 /* make a block-level element inline */
 .inline{
     display:inline;
 }
 
+.inline-block{
+    display:inline-block;
+}
+
 .unlist{
     @include unlist();
 }
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
index d71ff66da..f117c3fbf 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
@@ -72,6 +72,7 @@ input, textarea, select, .richtext, .tagit{
     &:disabled, &[disabled], &:disabled:hover, &[disabled]:hover{
         background-color:inherit;
         cursor:not-allowed;
+        color:$color-grey-4;
     }  
 }
 
@@ -532,6 +533,7 @@ li.focused > .help{
 
 .field-row{
     @include clearfix();
+
     /* negative margin the bottom so it doesn't add too much space */
     margin-bottom:-1.2em;
 }
@@ -819,14 +821,31 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
         @include row();
     }
 
+    .field-content{
+        @include column(10,0);
+    } 
+
     .field-col{
         float:left;
         padding-left:0 !important;
-    }
 
-    .field-content{
-        @include column(10);
-        padding-right:0;
-        padding-left:0;
-    }   
+        /* anything less than 4 columns or greater than 6 is impractical */
+        &.col4{
+            label{
+                @include column(2,0,4);
+            }
+            .field-content{
+                @include column(2, $padding, 4);
+            }
+        }
+        &.col6{
+            label{
+                @include column(2,0,6);
+            }
+            .field-content{
+                @include column(4, $padding, 6);
+            }
+        }
+    }
+  
 }
\ No newline at end of file
diff --git a/wagtail/wagtailimages/static/wagtailimages/js/image-url-generator.js b/wagtail/wagtailimages/static/wagtailimages/js/image-url-generator.js
index efc6e2135..fe3902483 100644
--- a/wagtail/wagtailimages/static/wagtailimages/js/image-url-generator.js
+++ b/wagtail/wagtailimages/static/wagtailimages/js/image-url-generator.js
@@ -1,11 +1,14 @@
 $(function() {
+    "use strict";
+
     $('.image-url-generator').each(function() {
         var $this = $(this);
         var $form = $this.find('form');
         var $filterMethodField = $form.find('select#id_filter_method');
         var $widthField = $form.find('input#id_width');
         var $heightField = $form.find('input#id_height');
-        var $result = $this.find('div.result');
+        var $result = $this.find('#result-url');
+        var $loadingMask = $this.find('.loading-mask')
         var $preview = $this.find('img.preview');
 
         var generatorUrl = $this.data('generatorUrl');
@@ -13,6 +16,8 @@ $(function() {
         function formChangeHandler() {
             var filterSpec = $filterMethodField.val();
 
+            $loadingMask.addClass('loading');
+
             if (filterSpec == 'original') {
                 $widthField.prop('disabled', true);
                 $heightField.prop('disabled', true);
@@ -33,34 +38,24 @@ $(function() {
             // Fields with width and height
             $.getJSON(generatorUrl.replace('__filterspec__', filterSpec))
                 .done(function(data) {
-                    $result.text(data['url']);
+                    $result.val(data['url']);
                     $preview.attr('src', data['url']);
+                    $loadingMask.removeClass('loading');
                 })
                 .fail(function(data) {
-                    $result.text(data.responseJSON['error']);
+                    $result.val(data.responseJSON['error']);
                     $preview.attr('src', '');
+                    $loadingMask.removeClass('loading');
                 });
         }
 
-        $form.change(formChangeHandler);
-        $form.keyup(formChangeHandler);
+        $form.change($.debounce(500, formChangeHandler));
+        $form.keyup($.debounce(500, formChangeHandler));
         formChangeHandler();
 
         // When the user clicks the URL, automatically select the whole thing (for easier copying)
         $result.click(function() {
-            if (document.selection) {
-                document.selection.empty();
-
-                var range = document.body.createTextRange();
-                range.moveToElementText(this);
-                range.select();
-            } else if (window.getSelection) {
-                window.getSelection().removeAllRanges();
-
-                var range = document.createRange();
-                range.selectNodeContents(this);
-                window.getSelection().addRange(range);
-            }
+            $(this).select();
         });
     });
 });
diff --git a/wagtail/wagtailimages/templates/wagtailimages/images/edit.html b/wagtail/wagtailimages/templates/wagtailimages/images/edit.html
index a2c02b736..2bca12303 100644
--- a/wagtail/wagtailimages/templates/wagtailimages/images/edit.html
+++ b/wagtail/wagtailimages/templates/wagtailimages/images/edit.html
@@ -38,7 +38,7 @@
             {% image image max-800x600 %}
 
             {% if url_generator_enabled %}
-                <a href="{% url 'wagtailimages_url_generator' image.id %}">URL Generator</a>
+                <a href="{% url 'wagtailimages_url_generator' image.id %}" class="button bicolor icon icon-link">URL Generator</a>
             {% endif %}
         </div>
     </div>
diff --git a/wagtail/wagtailimages/templates/wagtailimages/images/url_generator.html b/wagtail/wagtailimages/templates/wagtailimages/images/url_generator.html
index f0eca11e5..f9104b51c 100644
--- a/wagtail/wagtailimages/templates/wagtailimages/images/url_generator.html
+++ b/wagtail/wagtailimages/templates/wagtailimages/images/url_generator.html
@@ -5,27 +5,36 @@
 
 {% block bodyclass %}menu-images{% endblock %}
 
-{% block extra_js %}
-    {% compress js %}
-        <script type="text/javascript" src="{% static 'wagtailimages/js/image-url-generator.js' %}"></script>
-    {% endcompress %}
-{% endblock %}
-
 {% block content %}
     {% trans "Generating URL" as title_str %}
     {% include "wagtailadmin/shared/header.html" with title=title_str subtitle=image.title icon="image" %}
 
     <div class="image-url-generator nice-padding" data-generator-url="{% url 'wagtailimages_generate_url' image.id '__filterspec__' %}">
         <form>
-            {% for field in form %}
-                {% include "wagtailadmin/shared/field_as_li.html" %}
-            {% endfor %}
+            <ul class="fields">
+                {% include "wagtailadmin/shared/field_as_li.html" with field=form.filter_method %}
+                <li>
+                    <ul class="field-row">
+                        {% include "wagtailadmin/shared/field_as_li.html" with field=form.width li_classes="field-col col4" %}
+                        {% include "wagtailadmin/shared/field_as_li.html" with field=form.height li_classes="field-col col4" %}
+                    </ul>
+                </li>
+            </ul>
         </form>
 
-        <h3>URL</h3>
-        <div class="result"></div>
+        <h2>URL</h2>
+        <textarea id="result-url" rows="1"></textarea>
 
-        <h3>Preview</h3>
-        <img class="preview" src="" alt="Preview">
+        <h2>Preview</h2>
+        <div class="loading-mask inline-block">
+            <img class="preview" src="" alt="Preview" />
+        </div>
     </div>
 {% endblock %}
+
+{% block extra_js %}
+    {% compress js %}
+        <script src="{% static 'wagtailadmin/js/vendor/jquery.ba-throttle-debounce.min.js' %}"></script>
+        <script src="{% static 'wagtailimages/js/image-url-generator.js' %}"></script>
+    {% endcompress %}
+{% endblock %}
\ No newline at end of file