diff --git a/modules/system/assets/ui/js/loader.base.js b/modules/system/assets/ui/js/loader.base.js
index 637361c0b..439fe9513 100644
--- a/modules/system/assets/ui/js/loader.base.js
+++ b/modules/system/assets/ui/js/loader.base.js
@@ -12,6 +12,8 @@
  * JavaScript API:
  *
  * $('#buttons').loadIndicator({ text: 'Saving...', opaque: true }) - display the indicator in a solid (opaque) state
+ * $('#buttons').loadIndicator({ centered: true }) - display the indicator aligned in the center horizontally
+ * $('#buttons').loadIndicator({ size: small }) - display the indicator in small size
  * $('#buttons').loadIndicator({ text: 'Saving...' }) - display the indicator in a transparent state
  * $('#buttons').loadIndicator('hide') - display the indicator
  */
@@ -47,6 +49,12 @@
         if (this.options.opaque !== undefined) {
             indicator.addClass('is-opaque')
         }
+        if (this.options.centered !== undefined) {
+            indicator.addClass('indicator-center')
+        }
+        if (this.options.size === 'small') {
+            indicator.addClass('size-small')
+        }
 
         this.$el.prepend(indicator)
         this.$el.addClass('in-progress')
@@ -114,7 +122,9 @@
                 indicatorContainer = $(this).closest('.loading-indicator-container'),
                 loadingText = $(this).data('load-indicator'),
                 options = {
-                    opaque: $(this).data('load-indicator-opaque')
+                    opaque: $(this).data('load-indicator-opaque'),
+                    centered: $(this).data('load-indicator-centered'),
+                    size: $(this).data('load-indicator-size')
                 }
 
                 if (loadingText)
diff --git a/modules/system/assets/ui/storm-min.js b/modules/system/assets/ui/storm-min.js
index 38525f6a9..3c8d9bef5 100644
--- a/modules/system/assets/ui/storm-min.js
+++ b/modules/system/assets/ui/storm-min.js
@@ -3431,6 +3431,8 @@ var indicator=$('<div class="loading-indicator"></div>')
 indicator.append($('<div></div>').text(this.options.text))
 indicator.append($('<span></span>'))
 if(this.options.opaque!==undefined){indicator.addClass('is-opaque')}
+if(this.options.centered!==undefined){indicator.addClass('indicator-center')}
+if(this.options.size==='small'){indicator.addClass('size-small')}
 this.$el.prepend(indicator)
 this.$el.addClass('in-progress')
 this.tally++}
@@ -3450,7 +3452,7 @@ $.fn.loadIndicator.Constructor=LoadIndicator
 $.fn.loadIndicator.noConflict=function(){$.fn.loadIndicator=old
 return this}
 $(document).on('ajaxPromise','[data-load-indicator]',function(){var
-indicatorContainer=$(this).closest('.loading-indicator-container'),loadingText=$(this).data('load-indicator'),options={opaque:$(this).data('load-indicator-opaque')}
+indicatorContainer=$(this).closest('.loading-indicator-container'),loadingText=$(this).data('load-indicator'),options={opaque:$(this).data('load-indicator-opaque'),centered:$(this).data('load-indicator-centered'),size:$(this).data('load-indicator-size')}
 if(loadingText)
 options.text=loadingText
 indicatorContainer.loadIndicator(options)}).on('ajaxFail ajaxDone','[data-load-indicator]',function(){$(this).closest('.loading-indicator-container').loadIndicator('hide')})}(window.jQuery);+function($){"use strict";if($.oc===undefined)