diff --git a/app/assets/javascripts/create_merge_request_dropdown.js b/app/assets/javascripts/create_merge_request_dropdown.js
index 000faacb7d7c769812b0c314e063419661635714..1c0dab11392f1d0097e6de33af6012124f3b6c0d 100644
--- a/app/assets/javascripts/create_merge_request_dropdown.js
+++ b/app/assets/javascripts/create_merge_request_dropdown.js
@@ -42,7 +42,7 @@ export default class CreateMergeRequestDropdown {
     this.refInput = this.wrapperEl.querySelector('.js-ref');
     this.refMessage = this.wrapperEl.querySelector('.js-ref-message');
     this.unavailableButton = this.wrapperEl.querySelector('.unavailable');
-    this.unavailableButtonSpinner = this.unavailableButton.querySelector('.spinner');
+    this.unavailableButtonSpinner = this.unavailableButton.querySelector('.gl-spinner');
     this.unavailableButtonText = this.unavailableButton.querySelector('.text');
 
     this.branchCreated = false;
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index b5c59f34e871dc500111aa0c02524242787615f7..c324c846f47ffbb449be273e7b1dde4071bb7958 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -1732,7 +1732,7 @@ export default class Notes {
         // Submission failed, revert back to original note
         $noteBodyText.html(escape(cachedNoteBodyText));
         $editingNote.removeClass('being-posted fade-in');
-        $editingNote.find('.spinner').remove();
+        $editingNote.find('.gl-spinner').remove();
 
         // Show Flash message about failure
         this.updateNoteError();
diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js
index 80e14842f515bee0f17f5e9d019f4277627b0756..f9d708455609704acde4deba49b0960dafcee923 100644
--- a/app/assets/javascripts/pages/users/user_tabs.js
+++ b/app/assets/javascripts/pages/users/user_tabs.js
@@ -223,14 +223,14 @@ export default class UserTabs {
       .then((data) => UserTabs.renderActivityCalendar(data, $calendarWrap))
       .catch(() => {
         const cWrap = $calendarWrap[0];
-        cWrap.querySelector('.spinner').classList.add('invisible');
+        cWrap.querySelector('.gl-spinner').classList.add('invisible');
         cWrap.querySelector('.user-calendar-error').classList.remove('invisible');
         cWrap
           .querySelector('.user-calendar-error .js-retry-load')
           .addEventListener('click', (e) => {
             e.preventDefault();
             cWrap.querySelector('.user-calendar-error').classList.add('invisible');
-            cWrap.querySelector('.spinner').classList.remove('invisible');
+            cWrap.querySelector('.gl-spinner').classList.remove('invisible');
             this.loadActivityCalendar();
           });
       });
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index d1fa1187703a369793bd941ce33b962f3fb73aaa..603d28a83957c11ba3aac4d76a8dd6f517ff3a70 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -337,7 +337,7 @@
 
 .btn-loading {
   &:not(.disabled) {
-    .spinner {
+    .gl-spinner {
       display: none;
     }
   }
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index ff42cd836da99d340ae15f94975b67281298690e..1939a4b5be46f6d1680a059e48f42410f08173a1 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -147,7 +147,7 @@
     position: absolute;
   }
 
-  .spinner {
+  .gl-spinner {
     position: absolute;
     top: 9px;
     right: 8px;
diff --git a/app/assets/stylesheets/framework/editor-lite.scss b/app/assets/stylesheets/framework/editor-lite.scss
index 78995c6e4f5f140616708e8b18595604fa9e1173..05b53e0c3d8b8aaa835f066e7be0a863806d0989 100644
--- a/app/assets/stylesheets/framework/editor-lite.scss
+++ b/app/assets/stylesheets/framework/editor-lite.scss
@@ -11,7 +11,7 @@
 
   &::before {
     content: '';
-    @include spinner(32px, 3px);
+    @include spinner-deprecated(32px, 3px);
     @include gl-absolute;
     @include gl-z-index-1;
   }
diff --git a/app/assets/stylesheets/framework/spinner.scss b/app/assets/stylesheets/framework/spinner.scss
index c8eadce5c51ffdc72546d0e53f7106d300571fb3..afd2e7ff757cf064a383771b905ff050707daefe 100644
--- a/app/assets/stylesheets/framework/spinner.scss
+++ b/app/assets/stylesheets/framework/spinner.scss
@@ -1,16 +1,20 @@
-@mixin spinner-color($color) {
+/**
+* Do not use these spinner mixins. Rely on GitLab UI
+* GlLoadingIcon component instead.
+*/
+@mixin spinner-color-deprecated($color) {
   border-color: rgba($color, 0.25);
   border-top-color: $color;
 }
 
-@mixin spinner-size($size, $border-width) {
+@mixin spinner-size-deprecated($size, $border-width) {
   width: $size;
   height: $size;
   border-width: $border-width;
   @include webkit-prefix(transform-origin, 50% 50% calc((#{$size} / 2) + #{$border-width}));
 }
 
-@keyframes spinner-rotate {
+@keyframes spinner-rotate-deprecated {
   0% {
     transform: rotate(0);
   }
@@ -20,47 +24,16 @@
   }
 }
 
-@mixin spinner($size: 16px, $border-width: 2px, $color: $gray-700) {
+@mixin spinner-deprecated($size: 16px, $border-width: 2px, $color: $gray-700) {
   border-radius: 50%;
   position: relative;
   margin: 0 auto;
-  animation-name: spinner-rotate;
+  animation-name: spinner-rotate-deprecated;
   animation-duration: 0.6s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
   border-style: solid;
   display: inline-flex;
-  @include spinner-size($size, $border-width);
-  @include spinner-color($color);
-}
-
-.spinner {
-  @include spinner;
-
-  &.spinner-md {
-    @include spinner-size(32px, 3px);
-  }
-
-  &.spinner-lg {
-    @include spinner-size(64px, 4px);
-  }
-
-  &.spinner-dark {
-    @include spinner-color($gray-700);
-  }
-
-  &.spinner-light {
-    @include spinner-color($white);
-  }
-}
-
-.btn {
-  .spinner,
-  .gl-spinner {
-    vertical-align: text-bottom;
-  }
-}
-
-.spin {
-  animation: spinner-rotate 2s infinite linear;
+  @include spinner-size-deprecated($size, $border-width);
+  @include spinner-color-deprecated($color);
 }
diff --git a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
index 0d6f360112bd04061a56fd7cfb6e9a1bb20fafc2..fd47d247edb18419d3ba74a37b6a9e6b9106b6e7 100644
--- a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
+++ b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
@@ -151,7 +151,7 @@
         background-color: var(--gray-50, $gray-50);
       }
 
-      .spinner,
+      .gl-spinner,
       svg {
         width: $ci-action-dropdown-svg-size;
         height: $ci-action-dropdown-svg-size;
diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss
index 2f3cf889549ad72e67e173102fa40bea502806db..c7ade30d910e29f7a5c7cab434bc4e4769fc9f0a 100644
--- a/app/assets/stylesheets/page_bundles/pipeline.scss
+++ b/app/assets/stylesheets/page_bundles/pipeline.scss
@@ -409,7 +409,7 @@
         fill: var(--gray-500, $gray-500);
       }
 
-      .spinner {
+      .gl-spinner {
         top: 2px;
       }
 
diff --git a/app/views/admin/application_settings/_usage.html.haml b/app/views/admin/application_settings/_usage.html.haml
index 7bef2dbfb3495dcaaca1aec147f3ef86ce871401..64e8751bf311712e8c177b60020d8b313babbb5a 100644
--- a/app/views/admin/application_settings/_usage.html.haml
+++ b/app/views/admin/application_settings/_usage.html.haml
@@ -27,7 +27,7 @@
             %p.mb-2= s_('%{usage_ping_link_start}Learn more%{usage_ping_link_end} about what information is shared with GitLab Inc.').html_safe % { usage_ping_link_start: usage_ping_link_start, usage_ping_link_end: '</a>'.html_safe }
 
             %button.gl-button.btn.btn-default.js-payload-preview-trigger{ type: 'button', data: { payload_selector: ".#{payload_class}" } }
-              .spinner.js-spinner.gl-display-none.gl-mr-2
+              .gl-spinner.js-spinner.gl-display-none.gl-mr-2
               .js-text.d-inline= _('Preview payload')
             %pre.usage-data.js-syntax-highlight.code.highlight.mt-2.d-none{ class: payload_class, data: { endpoint: usage_data_admin_application_settings_path(format: :html) } }
           - else
diff --git a/app/views/clusters/clusters/_banner.html.haml b/app/views/clusters/clusters/_banner.html.haml
index 4a84745cf986eac3227929cc193086cd8aa6ca14..6d902132c73720a8b8eec792b4c456ca07e635e8 100644
--- a/app/views/clusters/clusters/_banner.html.haml
+++ b/app/views/clusters/clusters/_banner.html.haml
@@ -3,7 +3,7 @@
   %p.js-error-reason
 
 .hidden.js-cluster-creating.bs-callout.bs-callout-info{ role: 'alert' }
-  %span.spinner.spinner-dark.spinner-sm{ 'aria-label': 'Loading' }
+  %span.gl-spinner.gl-spinner-dark{ 'aria-label': 'Loading' }
   %span.gl-ml-2= s_('ClusterIntegration|Kubernetes cluster is being created...')
 
 .hidden.row.js-cluster-api-unreachable.gl-alert.gl-alert-warning{ role: 'alert' }
diff --git a/app/views/dashboard/_activities.html.haml b/app/views/dashboard/_activities.html.haml
index d617ee0e4ccda04f47b0968ad5eebb3a8105f210..ec07c636b7908ffa31de8e48a71026bed7a6c891 100644
--- a/app/views/dashboard/_activities.html.haml
+++ b/app/views/dashboard/_activities.html.haml
@@ -6,4 +6,4 @@
 
 .content_list
 .loading
-  .spinner.spinner-md
+  .gl-spinner.gl-spinner-md
diff --git a/app/views/dashboard/groups/_groups.html.haml b/app/views/dashboard/groups/_groups.html.haml
index 2f9dbf87d95c98aac9b4add0e0eb6e3116162fe8..d5cd4b66e2bd9c93a997cf312b65d4cc16954b19 100644
--- a/app/views/dashboard/groups/_groups.html.haml
+++ b/app/views/dashboard/groups/_groups.html.haml
@@ -1,4 +1,4 @@
 .js-groups-list-holder
   #js-groups-tree{ data: { hide_projects: 'true', endpoint: dashboard_groups_path(format: :json), path: dashboard_groups_path, form_sel: 'form#group-filter-form', filter_sel: '.js-groups-list-filter', holder_sel: '.js-groups-list-holder', dropdown_sel: '.js-group-filter-dropdown-wrap' } }
     .loading-container.text-center.prepend-top-20
-      .spinner.spinner-md
+      .gl-spinner.gl-spinner-md
diff --git a/app/views/dashboard/todos/_todo.html.haml b/app/views/dashboard/todos/_todo.html.haml
index f2f8afb636d539c5d4903a39c8a678d5adef59b3..bfd931e17baa729e2e5665b2da6ef528472dc4b8 100644
--- a/app/views/dashboard/todos/_todo.html.haml
+++ b/app/views/dashboard/todos/_todo.html.haml
@@ -50,12 +50,12 @@
     .todo-actions
       = link_to dashboard_todo_path(todo), method: :delete, class: 'gl-button btn btn-default btn-loading d-flex align-items-center js-done-todo', data: { href: dashboard_todo_path(todo) } do
         Done
-        %span.spinner.ml-1
+        %span.gl-spinner.ml-1
       = link_to restore_dashboard_todo_path(todo), method: :patch, class: 'gl-button btn btn-default btn-loading d-flex align-items-center js-undo-todo hidden', data: { href: restore_dashboard_todo_path(todo) } do
         Undo
-        %span.spinner.ml-1
+        %span.gl-spinner.ml-1
   - else
     .todo-actions
       = link_to restore_dashboard_todo_path(todo), method: :patch, class: 'gl-button btn btn-default btn-loading d-flex align-items-center js-add-todo', data: { href: restore_dashboard_todo_path(todo) } do
         Add a to do
-        %span.spinner.ml-1
+        %span.gl-spinner.ml-1
diff --git a/app/views/dashboard/todos/index.html.haml b/app/views/dashboard/todos/index.html.haml
index 66587518efc42ed4f61f11101d0f4cc9c74d702d..dcf8af4985c3c3fa4d12225714f18cbe33c12c40 100644
--- a/app/views/dashboard/todos/index.html.haml
+++ b/app/views/dashboard/todos/index.html.haml
@@ -29,10 +29,10 @@
         .gl-mr-3
           = link_to destroy_all_dashboard_todos_path(todos_filter_params), class: 'gl-button btn btn-default btn-loading align-items-center js-todos-mark-all', method: :delete, data: { href: destroy_all_dashboard_todos_path(todos_filter_params) } do
             Mark all as done
-            %span.spinner.ml-1
+            %span.gl-spinner.ml-1
           = link_to bulk_restore_dashboard_todos_path, class: 'gl-button btn btn-default btn-loading align-items-center js-todos-undo-all hidden', method: :patch , data: { href: bulk_restore_dashboard_todos_path(todos_filter_params) } do
             Undo mark all as done
-            %span.spinner.ml-1
+            %span.gl-spinner.ml-1
 
   .todos-filters
     .issues-details-filters.row-content-block.second-block
diff --git a/app/views/explore/groups/_groups.html.haml b/app/views/explore/groups/_groups.html.haml
index a3249275d5ebee18044826e025e9f9dc5f427260..0358fc524d34a3e2280e3c6dac636fb9d84eaa3b 100644
--- a/app/views/explore/groups/_groups.html.haml
+++ b/app/views/explore/groups/_groups.html.haml
@@ -1,4 +1,4 @@
 .js-groups-list-holder
   #js-groups-tree{ data: { hide_projects: 'true', endpoint: explore_groups_path(format: :json), path: explore_groups_path, form_sel: 'form#group-filter-form', filter_sel: '.js-groups-list-filter', holder_sel: '.js-groups-list-holder', dropdown_sel: '.js-group-filter-dropdown-wrap' } }
     .loading-container.text-center.prepend-top-20
-      .spinner.spinner-md
+      .gl-spinner.gl-spinner-md
diff --git a/app/views/groups/_activities.html.haml b/app/views/groups/_activities.html.haml
index b1a40bfc96b9cd77bb13b6690e5e3bc094e1fe2d..1695d3b553913d7cf0e36298f02347360bbccbee 100644
--- a/app/views/groups/_activities.html.haml
+++ b/app/views/groups/_activities.html.haml
@@ -6,4 +6,4 @@
 
 .content_list
 .loading
-  .spinner.spinner-md
+  .gl-spinner.gl-spinner-md
diff --git a/app/views/groups/_archived_projects.html.haml b/app/views/groups/_archived_projects.html.haml
index 48e9f630050f737752ef9bda546d9fa2e3ebc8e2..959c26acae04ffe7b7a2d0129a181b2e830f287d 100644
--- a/app/views/groups/_archived_projects.html.haml
+++ b/app/views/groups/_archived_projects.html.haml
@@ -5,4 +5,4 @@
   %ul.content-list{ data: { hide_projects: 'false', group_id: group.id, path: group_path(group) } }
     .js-groups-list-holder
       .loading-container.text-center.prepend-top-20
-        .spinner.spinner-md
+        .gl-spinner.gl-spinner-md
diff --git a/app/views/groups/_shared_projects.html.haml b/app/views/groups/_shared_projects.html.haml
index 2769b69add3ef5f7133dee3e2ab1afb30d101b0f..bfd056ccdd27213c1584bbfd47c0b248db902c65 100644
--- a/app/views/groups/_shared_projects.html.haml
+++ b/app/views/groups/_shared_projects.html.haml
@@ -5,4 +5,4 @@
   %ul.content-list{ data: { hide_projects: 'false', group_id: group.id, path: group_path(group) } }
     .js-groups-list-holder
       .loading-container.text-center.prepend-top-20
-        .spinner.spinner-md
+        .gl-spinner.gl-spinner-md
diff --git a/app/views/groups/_subgroups_and_projects.html.haml b/app/views/groups/_subgroups_and_projects.html.haml
index d9ab828a83ba7ca1faa07dad84be076cd8585dfb..651d182b9cc1c01eb58428b6aa8ef7a2175ec278 100644
--- a/app/views/groups/_subgroups_and_projects.html.haml
+++ b/app/views/groups/_subgroups_and_projects.html.haml
@@ -5,4 +5,4 @@
   %section{ data: { hide_projects: 'false', group_id: group.id, path: group_path(group) } }
     .js-groups-list-holder{ data: { show_schema_markup: 'true'} }
       .loading-container.text-center.prepend-top-20
-        .spinner.spinner-md
+        .gl-spinner.gl-spinner-md
diff --git a/app/views/groups/group_members/index.html.haml b/app/views/groups/group_members/index.html.haml
index 53ca694299e20c6bd21cb37aedc11c5f150b950f..fc67057f4171326d396c7fed8d8e52f43c63dca2 100644
--- a/app/views/groups/group_members/index.html.haml
+++ b/app/views/groups/group_members/index.html.haml
@@ -64,19 +64,19 @@
       #tab-members.tab-pane{ class: ('active' unless invited_active) }
         .js-group-members-list{ data: group_members_list_data_attributes(@group, @members, { param_name: :page, params: { invited_members_page: nil, search_invited: nil } }) }
           .loading
-            .spinner.spinner-md
+            .gl-spinner.gl-spinner-md
       - if @group.shared_with_group_links.any?
         #tab-groups.tab-pane
           .js-group-group-links-list{ data: group_group_links_list_data_attributes(@group) }
             .loading
-              .spinner.spinner-md
+              .gl-spinner.gl-spinner-md
       - if show_invited_members
         #tab-invited-members.tab-pane{ class: ('active' if invited_active) }
           .js-group-invited-members-list{ data: group_members_list_data_attributes(@group, @invited_members, { param_name: :invited_members_page, params: { page: nil } }) }
             .loading
-              .spinner.spinner-md
+              .gl-spinner.gl-spinner-md
       - if show_access_requests
         #tab-access-requests.tab-pane
           .js-group-access-requests-list{ data: group_members_list_data_attributes(@group, @requesters) }
             .loading
-              .spinner.spinner-md
+              .gl-spinner.gl-spinner-md
diff --git a/app/views/groups/imports/show.html.haml b/app/views/groups/imports/show.html.haml
index ac8ca8797fe52646f7d099ff36fe8c57ee3ae73c..79cac364016361492b32bb017e5b75bf0037cbc8 100644
--- a/app/views/groups/imports/show.html.haml
+++ b/app/views/groups/imports/show.html.haml
@@ -4,7 +4,7 @@
 .save-group-loader
   .center
     %h2
-      %i.loading.spinner.spinner-sm
+      %i.loading.gl-spinner
       = page_title
     %p
       = s_('GroupImport|Please wait while we import the group for you. Refresh at will.')
diff --git a/app/views/ide/_show.html.haml b/app/views/ide/_show.html.haml
index 70ac532e69f8aa2361a7c5d90204b2529c31f846..4fc00dfb3f43d22ca928ddaaaf5fe53886e2e761 100644
--- a/app/views/ide/_show.html.haml
+++ b/app/views/ide/_show.html.haml
@@ -6,5 +6,5 @@
 
 #ide.ide-loading{ data: ide_data }
   .text-center
-    .spinner.spinner-md
+    .gl-spinner.gl-spinner-md
     %h2.clgray= _('Loading the GitLab IDE...')
diff --git a/app/views/projects/_activity.html.haml b/app/views/projects/_activity.html.haml
index db0f13843dd69ea19ea03de8e126f1463958bd64..c5a0b6a1428dd050e1fcd689293fbf841410471c 100644
--- a/app/views/projects/_activity.html.haml
+++ b/app/views/projects/_activity.html.haml
@@ -11,4 +11,4 @@
 
 .content_list.project-activity{ :"data-href" => activity_project_path(@project) }
 .loading
-  .spinner.spinner-md
+  .gl-spinner.gl-spinner-md
diff --git a/app/views/projects/blob/_upload.html.haml b/app/views/projects/blob/_upload.html.haml
index c42b54ec61de4a8abc045976d09a7004d25d0418..28e33e3ac9bfbc9c2c34c51e3728f6ffa6625da9 100644
--- a/app/views/projects/blob/_upload.html.haml
+++ b/app/views/projects/blob/_upload.html.haml
@@ -21,7 +21,7 @@
 
           .form-actions
             = button_tag class: 'btn gl-button btn-confirm btn-upload-file', id: 'submit-all', type: 'button' do
-              .spinner.spinner-sm.gl-mr-2.js-loading-icon.hidden
+              .gl-spinner.gl-mr-2.js-loading-icon.hidden
               = button_title
             = link_to _("Cancel"), '#', class: "btn gl-button btn-default btn-cancel", "data-dismiss" => "modal"
 
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index 1b28136e82c2f730c04eca2d4dbc51393d8e1eb5..67007aa7448d5f8381e9f192492d6a6399ddc64c 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -37,13 +37,13 @@
     - @commit.parents.each do |parent|
       = link_to parent.short_id, project_commit_path(@project, parent), class: "commit-sha"
     .commit-info.branches
-      .spinner.vertical-align-middle
+      .gl-spinner.vertical-align-middle
 
   .well-segment.merge-request-info
     .icon-container
       = custom_icon('mr_bold')
     %span.commit-info.merge-requests{ 'data-project-commit-path' => merge_requests_project_commit_path(@project, @commit.id, format: :json) }
-      .spinner.vertical-align-middle
+      .gl-spinner.vertical-align-middle
 
   - if can?(current_user, :read_pipeline, @last_pipeline)
     .well-segment.pipeline-info
diff --git a/app/views/projects/diffs/_diffs.html.haml b/app/views/projects/diffs/_diffs.html.haml
index ac35a0a25c739e72228296c979bffe3cf9b77ddc..bb2682bb7c0419bca988b80815dd2bc79b3fe511 100644
--- a/app/views/projects/diffs/_diffs.html.haml
+++ b/app/views/projects/diffs/_diffs.html.haml
@@ -34,7 +34,7 @@
     - url = url_for(safe_params.merge(action: 'diff_files'))
     .js-diffs-batch{ data: { diff_files_path: url } }
       .text-center
-        %span.spinner.spinner-md
+        %span.gl-spinner.gl-spinner-md
   - else
     = render partial: 'projects/diffs/file', collection: diff_files, as: :diff_file, locals: { project: diffs.project, environment: environment, diff_page_context: diff_page_context }
 
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index ecaf3467cd2ddc6d6f804d92a8cc6a995289d145..187fe608a680d81a54e239c510853cf57e80f4b1 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -106,7 +106,7 @@
 .save-project-loader.hide
   .center
     %h2
-      .spinner.spinner-md.align-text-bottom
+      .gl-spinner.gl-spinner-md.align-text-bottom
       = _('Saving project.')
     %p= _('Please wait a moment, this page will automatically refresh when ready.')
 
diff --git a/app/views/projects/issues/_new_branch.html.haml b/app/views/projects/issues/_new_branch.html.haml
index 45b2f86c03d79cd5fda5024cf3c728df86f459a6..07fec195899c02fa7950294a9e615029cf2cbebf 100644
--- a/app/views/projects/issues/_new_branch.html.haml
+++ b/app/views/projects/issues/_new_branch.html.haml
@@ -13,13 +13,13 @@
   .create-mr-dropdown-wrap.d-inline-block.full-width-mobile.js-create-mr{ data: { project_path: @project.full_path, project_id: @project.id, can_create_path: can_create_path, create_mr_path: create_mr_path, create_branch_path: create_branch_path, refs_path: refs_path, is_confidential: can_create_confidential_merge_request?.to_s } }
     .btn-group.unavailable
       %button.gl-button.btn{ type: 'button', disabled: 'disabled' }
-        .spinner.align-text-bottom.gl-button-icon.hide
+        .gl-spinner.align-text-bottom.gl-button-icon.hide
         %span.text
           Checking branch availability…
 
     .btn-group.available.hidden
       %button.gl-button.btn.js-create-merge-request.btn-confirm{ type: 'button', data: { action: data_action } }
-        .spinner.js-spinner.gl-mr-2.gl-display-none
+        .gl-spinner.js-spinner.gl-mr-2.gl-display-none
         = value
 
       %button.gl-button.btn.btn-confirm.btn-icon.dropdown-toggle.create-merge-request-dropdown-toggle.js-dropdown-toggle{ type: 'button', data: { dropdown: { trigger: '#create-merge-request-dropdown' }, display: 'static' } }
diff --git a/app/views/projects/merge_requests/creations/_new_compare.html.haml b/app/views/projects/merge_requests/creations/_new_compare.html.haml
index 7082bf4b8b0d9d4f2e985f3642cd9907f198f714..b99714c17945ad4501ad11a0b6662853c4ba022a 100644
--- a/app/views/projects/merge_requests/creations/_new_compare.html.haml
+++ b/app/views/projects/merge_requests/creations/_new_compare.html.haml
@@ -30,7 +30,7 @@
               = dropdown_loading
         .card-footer
           .text-center
-            .js-source-loading.mt-1.spinner.spinner-sm
+            .js-source-loading.mt-1.gl-spinner
           %ul.list-unstyled.mr_source_commit
 
     .col-lg-6
@@ -59,7 +59,7 @@
               = dropdown_loading
         .card-footer
           .text-center
-            .js-target-loading.mt-1.spinner.spinner-sm
+            .js-target-loading.mt-1.gl-spinner
           %ul.list-unstyled.mr_target_commit
 
   - if @merge_request.errors.any?
diff --git a/app/views/projects/merge_requests/creations/_new_submit.html.haml b/app/views/projects/merge_requests/creations/_new_submit.html.haml
index ca1c4ed2d193a8578d53f34c6afa73f044a2e0ee..7e1ca19d9b64dab7417fb31ed58049b0b48e0d7f 100644
--- a/app/views/projects/merge_requests/creations/_new_submit.html.haml
+++ b/app/views/projects/merge_requests/creations/_new_submit.html.haml
@@ -48,4 +48,4 @@
 
   .mr-loading-status
     .loading.hide
-      .spinner.spinner-md
+      .gl-spinner.gl-spinner-md
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index 0452bd0571dbfa3a42c6b4af888caa799514e82f..6ce6ec5c1bc60d603be671c1944e868e525e4341 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -85,7 +85,7 @@
 
     .mr-loading-status
       .loading.hide
-        .spinner.spinner-md
+        .gl-spinner.gl-spinner-md
 
 = render 'shared/issuable/sidebar', issuable_sidebar: @issuable_sidebar, assignees: @merge_request.assignees, reviewers: @merge_request.reviewers, source_branch: @merge_request.source_branch
 
diff --git a/app/views/projects/mirrors/_ssh_host_keys.html.haml b/app/views/projects/mirrors/_ssh_host_keys.html.haml
index 4e3cd609d75e8dd08db0c65438c0ae271441771d..4411bc474b8acb3b8ac85966f25fa74001f6fb5d 100644
--- a/app/views/projects/mirrors/_ssh_host_keys.html.haml
+++ b/app/views/projects/mirrors/_ssh_host_keys.html.haml
@@ -4,7 +4,7 @@
 
 .form-group.js-ssh-host-keys-section{ class: ('collapse' unless mirror.ssh_mirror_url?) }
   %button.btn.gl-button.btn-inverted.btn-secondary.inline.js-detect-host-keys.gl-mr-3{ type: 'button', data: { qa_selector: 'detect_host_keys' } }
-    .js-spinner.d-none.spinner.mr-1
+    .js-spinner.d-none.gl-spinner.mr-1
     = _('Detect host keys')
   .fingerprint-ssh-info.js-fingerprint-ssh-info.gl-mt-3.gl-mb-3{ class: ('collapse' unless mirror.ssh_mirror_url?) }
     %label.label-bold
diff --git a/app/views/projects/network/show.html.haml b/app/views/projects/network/show.html.haml
index 3cff85a497961ad0e83746b39d67b39874547eb1..4cabb9304337b3292fbdcf40cfcaebbae0d18f4e 100644
--- a/app/views/projects/network/show.html.haml
+++ b/app/views/projects/network/show.html.haml
@@ -17,4 +17,4 @@
     - if @commit
       .network-graph.gl-bg-white.gl-overflow-scroll.gl-overflow-x-hidden{ data: { url: @url, commit_url: @commit_url, ref: @ref, commit_id: @commit.id } }
         .text-center.gl-mt-3
-          .spinner.spinner-md
+          .gl-spinner.gl-spinner-md
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index 059d6eb28c5047b267c802fabc9363fd023102a1..609d3317315a76cbe437c8513f64465eb2481c31 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -75,7 +75,7 @@
 .save-project-loader.d-none
   .center
     %h2
-      .spinner.spinner-md.align-text-bottom
+      .gl-spinner.gl-spinner-md.align-text-bottom
       = s_('ProjectsNew|Creating project & repository.')
     %p
       = s_('ProjectsNew|Please wait a moment, this page will automatically refresh when ready.')
diff --git a/app/views/projects/project_members/index.html.haml b/app/views/projects/project_members/index.html.haml
index 01114b8b4f736deab4c5c2ae7ae54bc8abb8f86f..628d36b86d9cd21a1489927de361ae41d09c313e 100644
--- a/app/views/projects/project_members/index.html.haml
+++ b/app/views/projects/project_members/index.html.haml
@@ -81,19 +81,19 @@
       #tab-members.tab-pane{ class: ('active' unless groups_tab_active?) }
         .js-project-members-list{ data: project_members_list_data_attributes(@project, @project_members, { param_name: :page, params: { search_groups: nil } }) }
           .loading
-            .spinner.spinner-md
+            .gl-spinner.gl-spinner-md
       - if show_groups?(@group_links)
         #tab-groups.tab-pane{ class: ('active' if groups_tab_active?) }
           .js-project-group-links-list{ data: project_group_links_list_data_attributes(@project, @group_links) }
             .loading
-              .spinner.spinner-md
+              .gl-spinner.gl-spinner-md
       - if show_invited_members?(@project, @invited_members)
         #tab-invited-members.tab-pane
           .js-project-invited-members-list{ data: project_members_list_data_attributes(@project, @invited_members) }
             .loading
-              .spinner.spinner-md
+              .gl-spinner.gl-spinner-md
       - if show_access_requests?(@project, @requesters)
         #tab-access-requests.tab-pane
           .js-project-access-requests-list{ data: project_members_list_data_attributes(@project, @requesters) }
             .loading
-              .spinner.spinner-md
+              .gl-spinner.gl-spinner-md
diff --git a/app/views/shared/milestones/_delete_button.html.haml b/app/views/shared/milestones/_delete_button.html.haml
index 09c783a0b24f273ba1efa75dadd1de565413d46f..6d4ff255f0642b938b421e7c39eea5dc8f117a39 100644
--- a/app/views/shared/milestones/_delete_button.html.haml
+++ b/app/views/shared/milestones/_delete_button.html.haml
@@ -7,6 +7,6 @@
   milestone_merge_request_count: @milestone.merge_requests.count },
   disabled: true }
   = _('Delete')
-  .spinner.js-loading-icon.hidden
+  .gl-spinner.js-loading-icon.hidden
 
 #js-delete-milestone-modal
diff --git a/app/views/shared/milestones/_tab_loading.html.haml b/app/views/shared/milestones/_tab_loading.html.haml
index fe1184114e9f873d4e7c5d739fcd3c1611e79ffb..b19e994ef800ef0e5d4d5ba8b8cb6c6e68f41b5f 100644
--- a/app/views/shared/milestones/_tab_loading.html.haml
+++ b/app/views/shared/milestones/_tab_loading.html.haml
@@ -1,2 +1,2 @@
 .text-center.gl-mt-3
-  .spinner.spinner-md
+  .gl-spinner.gl-spinner-md
diff --git a/app/views/users/_overview.html.haml b/app/views/users/_overview.html.haml
index a78971967ffaa275fe1d145d519a3a99ed0e12db..eb29e691ebdfcb0a829b3e541dd9255d49d39d00 100644
--- a/app/views/users/_overview.html.haml
+++ b/app/views/users/_overview.html.haml
@@ -3,7 +3,7 @@
 .row.d-none.d-sm-flex
   .col-12.calendar-block.gl-my-3
     .user-calendar.light{ data: { calendar_path: user_calendar_path(@user, :json), calendar_activities_path: user_calendar_activities_path, utc_offset: Time.zone.utc_offset } }
-      .spinner.spinner-md.gl-my-8
+      .gl-spinner.gl-spinner-md.gl-my-8
       .user-calendar-error.invisible
         = _('There was an error loading users activity calendar.')
         %a.js-retry-load{ href: '#' }
@@ -20,7 +20,7 @@
             = link_to s_('UserProfile|View all'), user_activity_path, class: "hide js-view-all"
           .overview-content-list{ data: { href: user_activity_path } }
             .center.light.loading
-              .spinner.spinner-md
+              .gl-spinner.gl-spinner-md
 
   - unless Feature.enabled?(:security_auto_fix) && @user.bot?
     .col-md-12.col-lg-6
@@ -32,4 +32,4 @@
             = link_to s_('UserProfile|View all'), user_projects_path, class: "hide js-view-all"
           .overview-content-list{ data: { href: user_projects_path } }
             .center.light.loading
-              .spinner.spinner-md
+              .gl-spinner.gl-spinner-md
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index daa41e0ebfe1d2c999b5017d2a257d8c4c52f9ec..d89f4b811a307d85b0016177369c8c3a782fe75d 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -169,7 +169,7 @@
               = s_('UserProfile|Most Recent Activity')
             .content_list{ data: { href: user_activity_path } }
             .loading
-              .spinner.spinner-md
+              .gl-spinner.gl-spinner-md
       - unless @user.bot?
         - if profile_tab?(:groups)
           #groups.tab-pane
@@ -200,7 +200,7 @@
             -# This tab is always loaded via AJAX
 
     .loading.hide
-      .spinner.spinner-md
+      .gl-spinner.gl-spinner-md
 
     - if profile_tabs.empty?
       .svg-content
diff --git a/ee/app/views/admin/application_settings/_seat_link_form.html.haml b/ee/app/views/admin/application_settings/_seat_link_form.html.haml
index 11073919e41dbb70119f32338ec8f435f438be46..46420c19a5504440284b9e80727c4bfdeff804ed 100644
--- a/ee/app/views/admin/application_settings/_seat_link_form.html.haml
+++ b/ee/app/views/admin/application_settings/_seat_link_form.html.haml
@@ -19,7 +19,7 @@
             %p.mb-2= s_('%{link_start}Learn more%{link_end} about what information is shared with GitLab Inc.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
 
             %button.btn.gl-button.btn-default.js-payload-preview-trigger{ type: 'button', data: { payload_selector: ".#{payload_class}" } }
-              .spinner.js-spinner.gl-display-none.gl-mr-2
+              .gl-spinner.js-spinner.gl-display-none.gl-mr-2
               .js-text.d-inline= _('Preview payload')
             %pre.usage-data.js-syntax-highlight.code.highlight.mt-2.d-none{ class: payload_class, data: { endpoint: seat_link_payload_admin_application_settings_path(format: :html) } }
           - else
diff --git a/ee/app/views/groups/saml_providers/_scim_token.html.haml b/ee/app/views/groups/saml_providers/_scim_token.html.haml
index e3f977957fc709beac7a9f0c7972ef96e5b626cc..5d664c4373cbc02b1f5913af70cbfbbc161669af 100644
--- a/ee/app/views/groups/saml_providers/_scim_token.html.haml
+++ b/ee/app/views/groups/saml_providers/_scim_token.html.haml
@@ -16,4 +16,4 @@
   .well-segment.borderless.col-12.col-lg-9.p-0
     = render 'scim_row', value: @scim_token_url, field: 'scim_endpoint_url', label_text: s_('GroupSAML|SCIM API endpoint URL'), show_clipboard: true
 .gl-mt-3.text-center.js-scim-loading-container.d-none
-  .spinner
+  .gl-spinner
diff --git a/ee/app/views/projects/_project_templates.html.haml b/ee/app/views/projects/_project_templates.html.haml
index 238cc630e5d8295b76b67a1304697c5f6ccfcda8..3d97262935a49dc06dcf8ef022d5cff31ba4a74b 100644
--- a/ee/app/views/projects/_project_templates.html.haml
+++ b/ee/app/views/projects/_project_templates.html.haml
@@ -23,10 +23,10 @@
       = render partial: 'projects/project_templates/template', collection: Gitlab::ProjectTemplate.all + Gitlab::SampleDataTemplate.all
     .project-templates-buttons.import-buttons.tab-pane.js-custom-instance-project-templates-tab-content#custom-instance-project-templates{ data: {initial_templates: user_available_project_templates_path(current_user)} }
       .text-center.m-4
-        .spinner.spinner-md
+        .gl-spinner.gl-spinner-md
     .project-templates-buttons.import-buttons.tab-pane.js-custom-group-project-templates-tab-content#custom-group-project-templates{ data: {initial_templates: user_available_group_templates_path(current_user, group_id: group_id)} }
       .text-center.m-4
-        .spinner.spinner-md
+        .gl-spinner.gl-spinner-md
 
   .project-fields-form
     = render 'projects/project_templates/project_fields_form'
diff --git a/ee/app/views/projects/settings/slacks/edit.html.haml b/ee/app/views/projects/settings/slacks/edit.html.haml
index 49955e6c4b3aac3fe9ecc8078c7aa8bf6e8e05e3..45bb8e79a7693a8fca57d9e440a5f5fa208a0606 100644
--- a/ee/app/views/projects/settings/slacks/edit.html.haml
+++ b/ee/app/views/projects/settings/slacks/edit.html.haml
@@ -16,7 +16,7 @@
 
       .footer-block.row-content-block
         %button.btn.gl-button.btn-confirm{ type: 'submit' }
-          .spinner.spinner-light
+          .gl-spinner.gl-spinner-light
           %span
             Save changes
         &nbsp;
diff --git a/ee/changelogs/unreleased/327044-migrate-to-gl-spinner.yml b/ee/changelogs/unreleased/327044-migrate-to-gl-spinner.yml
new file mode 100644
index 0000000000000000000000000000000000000000..087e5808ee2576392350c429cafb0a94ce9227bd
--- /dev/null
+++ b/ee/changelogs/unreleased/327044-migrate-to-gl-spinner.yml
@@ -0,0 +1,5 @@
+---
+title: Migrate spinner class to gl-spinner class
+merge_request: 58706
+author:
+type: changed
diff --git a/spec/features/projects/commit/builds_spec.rb b/spec/features/projects/commit/builds_spec.rb
index 00ec9d49a108ffc1c4e4be598493c09957ae8e63..7b10f72006f0231c8659cc89730b4ea0d20f4c5a 100644
--- a/spec/features/projects/commit/builds_spec.rb
+++ b/spec/features/projects/commit/builds_spec.rb
@@ -30,7 +30,7 @@
       wait_for_requests
 
       page.within('.merge-request-info') do
-        expect(page).not_to have_selector '.spinner'
+        expect(page).not_to have_selector '.gl-spinner'
         expect(page).to have_content 'No related merge requests found'
       end
     end
diff --git a/spec/frontend/create_merge_request_dropdown_spec.js b/spec/frontend/create_merge_request_dropdown_spec.js
index b4c13981dd5720396404d714d250c06704edefb9..6f15f31332580d0b6aa18972c98305a5532fc376 100644
--- a/spec/frontend/create_merge_request_dropdown_spec.js
+++ b/spec/frontend/create_merge_request_dropdown_spec.js
@@ -15,7 +15,7 @@ describe('CreateMergeRequestDropdown', () => {
       <div id="dummy-wrapper-element">
         <div class="available"></div>
         <div class="unavailable">
-          <div class="spinner"></div>
+          <div class="gl-spinner"></div>
           <div class="text"></div>
         </div>
         <div class="js-ref"></div>