1 files changed, 33 insertions, 7 deletions
diff --git a/app/helpers/icons_helper.rb b/app/helpers/icons_helper.rb
index 32d808c960c..6f7ac069fe4 100644
--- a/app/helpers/icons_helper.rb
+++ b/app/helpers/icons_helper.rb
@@ -49,13 +49,39 @@ module IconsHelper
     end
   end
 
-  def loading_icon(container: false, color: 'orange', size: 'sm', css_class: nil)
-    css_classes = ['gl-spinner', "gl-spinner-#{color}", "gl-spinner-#{size}"]
-    css_classes << "#{css_class}" unless css_class.blank?
-
-    spinner = content_tag(:span, "", { class: css_classes.join(' '), aria: { label: _('Loading') } })
-
-    container == true ? content_tag(:div, spinner, { class: 'gl-spinner-container' }) : spinner
+  # Creates a GitLab UI loading icon/spinner.
+  #
+  # Examples:
+  #   # Default
+  #   gl_loading_icon
+  #
+  #   # Sizes
+  #   gl_loading_icon(size: 'md')
+  #   gl_loading_icon(size: 'lg')
+  #   gl_loading_icon(size: 'xl')
+  #
+  #   # Colors
+  #   gl_loading_icon(color: 'light')
+  #
+  #   # Block/Inline
+  #   gl_loading_icon(inline: true)
+  #
+  #   # Custom classes
+  #   gl_loading_icon(css_class: "foo-bar")
+  #
+  # See also https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-loading-icon--default
+  def gl_loading_icon(inline: false, color: 'dark', size: 'sm', css_class: nil)
+    spinner = content_tag(:span, "", {
+      class: %[gl-spinner gl-spinner-#{color} gl-spinner-#{size} gl-vertical-align-text-bottom!],
+      aria: { label: _('Loading') }
+    })
+
+    container_classes = ['gl-spinner-container']
+    container_classes << css_class unless css_class.blank?
+    content_tag(inline ? :span : :div, spinner, {
+      class: container_classes,
+      role: 'status'
+    })
   end
 
   def external_snippet_icon(name)