diff --git a/app/pods/cases/case/subcases/loading/template.hbs b/app/pods/cases/case/subcases/loading/template.hbs
index 14cc880a33..1ee0f7eec6 100644
--- a/app/pods/cases/case/subcases/loading/template.hbs
+++ b/app/pods/cases/case/subcases/loading/template.hbs
@@ -1,6 +1,2 @@
-<div class="vlc-u-box-model-maximize-height vlc-scroll-wrapper auk-u-scroll-no-overflow vl-loader-container--not-supported">
-  <p>
-    {{web-components/vl-loader}}
-  </p>
-</div>
+{{web-components/vl-loader}}
 {{outlet}}
diff --git a/app/pods/components/access-level-pill/template.hbs b/app/pods/components/access-level-pill/template.hbs
index 41dadadefb..7cad56154d 100644
--- a/app/pods/components/access-level-pill/template.hbs
+++ b/app/pods/components/access-level-pill/template.hbs
@@ -1,6 +1,6 @@
 <div class="auk-u-flex auk-u-flex--vertical-center">
   {{#if this.isLoading}}
-    <div class="vl-loader" role="alert" aria-busy="true"></div>
+    <div class="auk-loader" role="alert" aria-busy="true"></div>
   {{else}}
     {{#if (not @confidential)}}
       {{#if (not this.isEditing)}}
diff --git a/app/pods/components/agenda/agendaitem-search/template.hbs b/app/pods/components/agenda/agendaitem-search/template.hbs
index 4d088d35ef..f520607e55 100644
--- a/app/pods/components/agenda/agendaitem-search/template.hbs
+++ b/app/pods/components/agenda/agendaitem-search/template.hbs
@@ -25,7 +25,7 @@
           </div>
         </div>
         {{#if this.debouncedSearchTask.isRunning}}
-          <div class="vl-loader" role="alert" aria-busy="true"></div>
+          <div class="auk-loader" role="alert" aria-busy="true"></div>
         {{/if}}
       </div>
     </div>
diff --git a/app/pods/components/agenda/agendaitem/agendaitem-controls/template.hbs b/app/pods/components/agenda/agendaitem/agendaitem-controls/template.hbs
index 5853eec2b5..c3f3885ab8 100644
--- a/app/pods/components/agenda/agendaitem/agendaitem-controls/template.hbs
+++ b/app/pods/components/agenda/agendaitem/agendaitem-controls/template.hbs
@@ -42,7 +42,7 @@
       </AttachPopover>
     </WebComponents::AuButtonToolbar>
   {{else}}
-    <div class="vl-loader"></div>
+    <div class="auk-loader" role="alert" aria-busy="true"></div>
   {{/if}}
   {{#if this.isVerifying}}
     <WebComponents::VlModalVerify
diff --git a/app/pods/components/cases/subcase-mandatees/template.hbs b/app/pods/components/cases/subcase-mandatees/template.hbs
index 5e5be7c353..0fed343ed7 100644
--- a/app/pods/components/cases/subcase-mandatees/template.hbs
+++ b/app/pods/components/cases/subcase-mandatees/template.hbs
@@ -41,7 +41,7 @@
                 <button type="button"
                         class="vl-button vl-button--link vl-button--icon"
                         disabled>
-                  <div class="vl-loader" role="alert" aria-busy="true"></div>
+                  <div class="auk-loader" role="alert" aria-busy="true"></div>
                 </button>
               {{else}}
                 <button type="button"
diff --git a/app/pods/components/news-item/edit-item/template.hbs b/app/pods/components/news-item/edit-item/template.hbs
index c9b4b982ff..c4979abfe2 100644
--- a/app/pods/components/news-item/edit-item/template.hbs
+++ b/app/pods/components/news-item/edit-item/template.hbs
@@ -18,12 +18,10 @@
         </button>
       {{/if}}
     {{else}}
-      <div class="vl-loader" role="alert" aria-busy="true">
-        <div class="vl-loader" role="alert" aria-busy="true">
-          <EmberTooltip @side="bottom" @tooltipClass="tooltip-custom">
-            {{t "nota-loading-text"}}
-          </EmberTooltip>
-        </div>
+      <div class="auk-loader" role="alert" aria-busy="true">
+        <EmberTooltip @side="bottom" @tooltipClass="tooltip-custom">
+          {{t "nota-loading-text"}}
+        </EmberTooltip>
       </div>
     {{/if}}
   </div>
diff --git a/app/pods/components/newsletter-table/button-toolbar/template.hbs b/app/pods/components/newsletter-table/button-toolbar/template.hbs
index 0fbf3f1985..ecf0642ae5 100644
--- a/app/pods/components/newsletter-table/button-toolbar/template.hbs
+++ b/app/pods/components/newsletter-table/button-toolbar/template.hbs
@@ -7,7 +7,7 @@
     <i class="vl-button__icon ki-pencil"></i>
   </button>
   {{#if (is-pending (await @agendaitem.nota))}}
-    <div class="vl-loader" role="alert" aria-busy="true">
+    <div class="auk-loader" role="alert" aria-busy="true">
       <EmberTooltip @side="bottom" @tooltipClass="tooltip-custom">
         {{t "nota-loading-text"}}
       </EmberTooltip>
diff --git a/app/pods/components/newsletter/newsletter-header-overview/template.hbs b/app/pods/components/newsletter/newsletter-header-overview/template.hbs
index 6a926e1146..f22fb5ee3f 100644
--- a/app/pods/components/newsletter/newsletter-header-overview/template.hbs
+++ b/app/pods/components/newsletter/newsletter-header-overview/template.hbs
@@ -109,9 +109,9 @@
                     (or (is-pending agenda.createdFor.mailCampaign) isLoading)
                   }}
                     <li class="vlc-dropdown-menu__item">
-                      <div class="vl-loader-link">
+                      <div class="auk-loader-wrapper auk-loader-wrapper--small auk-u-p-2">
                         <div
-                          class="vl-loader"
+                          class="auk-loader"
                           role="alert"
                           aria-busy="true"
                         ></div>
diff --git a/app/pods/components/subcases/subcase-description/template.hbs b/app/pods/components/subcases/subcase-description/template.hbs
index 81e21e0666..6ccb8eab79 100644
--- a/app/pods/components/subcases/subcase-description/template.hbs
+++ b/app/pods/components/subcases/subcase-description/template.hbs
@@ -77,7 +77,7 @@
                (is-pending subcase.onAgendaInfo)
             )
           }}
-            <div class="vl-loader"></div>
+            <div class="auk-loader" role="alert" aria-busy="true"></div>
           {{else}}
             {{#if (await subcase.onAgendaInfo)}}
               {{#if
diff --git a/app/pods/components/subcases/subcase-header/template.hbs b/app/pods/components/subcases/subcase-header/template.hbs
index 2b87cb7a2b..232a3b1169 100644
--- a/app/pods/components/subcases/subcase-header/template.hbs
+++ b/app/pods/components/subcases/subcase-header/template.hbs
@@ -11,7 +11,7 @@
     {{#if currentSession.isEditor}}
       <div class="vlc-toolbar__item">
         {{#if (or (is-pending canPropose) isLoading)}}
-          <div class="vl-loader"></div>
+          <div class="auk-loader" role="alert" aria-busy="true"></div>
         {{else if (await canPropose)}}
           <button type="button" class="vl-button">
             {{t "propose-for-agenda"}}
diff --git a/app/pods/components/utils/formally-ok-selector/template.hbs b/app/pods/components/utils/formally-ok-selector/template.hbs
index dbf1a40fe0..da83c7f293 100644
--- a/app/pods/components/utils/formally-ok-selector/template.hbs
+++ b/app/pods/components/utils/formally-ok-selector/template.hbs
@@ -5,7 +5,7 @@
   {{#if isLoading}}
     <div class="auk-u-muted">
       {{t "please-be-patient"}}
-      <div class="vl-loader" role="alert" aria-busy="true"></div>
+      <div class="auk-loader" role="alert" aria-busy="true"></div>
     </div>
   {{else}}
     <PowerSelect
diff --git a/app/pods/components/utils/kind-selector/template.hbs b/app/pods/components/utils/kind-selector/template.hbs
index a56034455c..a207a10db5 100644
--- a/app/pods/components/utils/kind-selector/template.hbs
+++ b/app/pods/components/utils/kind-selector/template.hbs
@@ -5,7 +5,7 @@
   {{#if isLoading}}
     <div class="auk-u-muted">
       {{t "please-be-patient"}}
-      <div class="vl-loader" role="alert" aria-busy="true"></div>
+      <div class="auk-loader" role="alert" aria-busy="true"></div>
     </div>
   {{else}}
     {{#power-select
diff --git a/app/pods/components/utils/simple-spinner/template.hbs b/app/pods/components/utils/simple-spinner/template.hbs
index 1bd2765f5f..be41839243 100644
--- a/app/pods/components/utils/simple-spinner/template.hbs
+++ b/app/pods/components/utils/simple-spinner/template.hbs
@@ -1,5 +1,5 @@
 <div data-test-vl-loader>
   <div class="auk-u-text-align--center">
-    <div class="vl-loader" role="alert" aria-busy="true"></div>
+    <div class="auk-loader" role="alert" aria-busy="true"></div>
   </div>
 </div>
\ No newline at end of file
diff --git a/app/pods/components/web-components/au-loader/template.hbs b/app/pods/components/web-components/au-loader/template.hbs
index 378bc96b7f..434fcb4f44 100644
--- a/app/pods/components/web-components/au-loader/template.hbs
+++ b/app/pods/components/web-components/au-loader/template.hbs
@@ -1,5 +1,5 @@
 {{#if @message}}
-  <div class="auk-loader-wrapper auk-loader-wrapper--small">
+  <div class="auk-loader-wrapper auk-loader-wrapper--small auk-u-maximize-width auk-u-maximize-height">
     <div class="auk-loader" role="alert" aria-busy="true"></div>
     <p>{{@message}}</p>
   </div>
diff --git a/app/pods/components/web-components/au-loading-page/component.js b/app/pods/components/web-components/au-loading-page/component.js
index 9b58e9415c..465e6afbf9 100644
--- a/app/pods/components/web-components/au-loading-page/component.js
+++ b/app/pods/components/web-components/au-loading-page/component.js
@@ -1,4 +1,3 @@
-import Component from '@ember/component';
-export default Component.extend({
-  classNames: ['vlc-u-box-model-maximize-height', 'vlc-u-box-model-maximize-width', 'vlc-scroll-wrapper', 'auk-u-scroll-no-overflow', 'vl-loader-container--not-supported'],
-});
+import Component from '@glimmer/component';
+
+export default class LoadingPage extends Component {}
diff --git a/app/pods/components/web-components/light-table/vl-content-toggle/template.hbs b/app/pods/components/web-components/light-table/vl-content-toggle/template.hbs
index 30d4947917..b571c2ca5d 100644
--- a/app/pods/components/web-components/light-table/vl-content-toggle/template.hbs
+++ b/app/pods/components/web-components/light-table/vl-content-toggle/template.hbs
@@ -1,5 +1,5 @@
 {{#if isLoading}}
-  <div class="vl-loader" role="alert" aria-busy="true"></div>
+  <div class="auk-loader" role="alert" aria-busy="true"></div>
 {{else}}
   <input class="vl-checkbox--switch"
          type="checkbox"
diff --git a/app/pods/components/web-components/vl-alert/template.hbs b/app/pods/components/web-components/vl-alert/template.hbs
index 9d3ff86583..30371e1f74 100644
--- a/app/pods/components/web-components/vl-alert/template.hbs
+++ b/app/pods/components/web-components/vl-alert/template.hbs
@@ -6,7 +6,7 @@
 >
   {{#if (eq @type "loading")}}
     <div class="vl-alert__loader">
-      <div class="vl-loader" role="alert" aria-busy="true"></div>
+      <div class="auk-loader" role="alert" aria-busy="true"></div>
     </div>
   {{else}}
     <div class="vl-alert__icon">
diff --git a/app/pods/components/web-components/vl-loader/component.js b/app/pods/components/web-components/vl-loader/component.js
index 5570647734..3608bf8110 100644
--- a/app/pods/components/web-components/vl-loader/component.js
+++ b/app/pods/components/web-components/vl-loader/component.js
@@ -1,3 +1,3 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 
-export default Component.extend({});
+export default class Loader extends Component {}
diff --git a/app/pods/components/web-components/vl-loader/template.hbs b/app/pods/components/web-components/vl-loader/template.hbs
index 3286e70566..6250ff3844 100644
--- a/app/pods/components/web-components/vl-loader/template.hbs
+++ b/app/pods/components/web-components/vl-loader/template.hbs
@@ -1,14 +1,12 @@
-<div data-test-vl-loader class="vl-region">
-  <div class="auk-u-text-align--center">
-    <div class="vl-loader" role="alert" aria-busy="true"></div>
-    {{#if (not text)}}
-      <p>
-        {{t "loading-text"}}
-      </p>
-    {{else}}
-      <p>
-        {{text}}
-      </p>
-    {{/if}}
-  </div>
+<div data-test-vl-loader class="auk-loader-wrapper auk-loader-wrapper--small auk-u-maximize-width auk-u-maximize-height">
+  <div class="auk-loader" role="alert" aria-busy="true"></div>
+  {{#if (not text)}}
+    <p>
+      {{t "loading-text"}}
+    </p>
+  {{else}}
+    <p>
+      {{text}}
+    </p>
+  {{/if}}
 </div>
\ No newline at end of file
diff --git a/app/pods/components/web-components/vl-table-actions/template.hbs b/app/pods/components/web-components/vl-table-actions/template.hbs
index 6acde23b28..58de9537c3 100644
--- a/app/pods/components/web-components/vl-table-actions/template.hbs
+++ b/app/pods/components/web-components/vl-table-actions/template.hbs
@@ -24,7 +24,7 @@
       </button>
     {{/if}}
   {{else}}
-    <div class="vl-loader" role="alert" aria-busy="true">
+    <div class="auk-loader" role="alert" aria-busy="true">
       <EmberTooltip @side="bottom" @tooltipClass="tooltip-custom">
         {{t "nota-loading-text"}}
       </EmberTooltip>
diff --git a/app/pods/help/template.hbs b/app/pods/help/template.hbs
index 9b0a129c7d..aa70027480 100644
--- a/app/pods/help/template.hbs
+++ b/app/pods/help/template.hbs
@@ -1,6 +1,2 @@
-<div class="vlc-u-box-model-maximize-height vlc-scroll-wrapper auk-u-scroll-no-overflow vl-loader-container--not-supported">
-  <p>
-    {{web-components/vl-loader text=(t "redirect-loading-text")}}
-  </p>
-</div>
+{{web-components/vl-loader text=(t "redirect-loading-text")}}
 {{outlet}}
diff --git a/app/pods/not-supported/template.hbs b/app/pods/not-supported/template.hbs
index de1794986c..0f210d91ad 100644
--- a/app/pods/not-supported/template.hbs
+++ b/app/pods/not-supported/template.hbs
@@ -1,5 +1,5 @@
 {{!-- template-lint-disable no-bare-strings  --}}
-<div class="vlc-u-box-model-maximize-height vlc-scroll-wrapper auk-u-scroll-no-overflow vl-loader-container--not-supported">
+<div class="vlc-u-box-model-maximize-height vlc-scroll-wrapper auk-u-scroll-no-overflow vl-not-supported">
   <p class="width-50">
     U bent aangemeld in Kaleidos. Kaleidos is een web toepassing waarvoor de goede werking enkel gegarandeerd is in de
     recente PC, Mac en Linux versies van:
diff --git a/app/styles/app.scss b/app/styles/app.scss
index a0486b544b..de8d7e056e 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -37,7 +37,6 @@ $icon-font-location: '/fonts/'; // overrides the default location for flanders-i
 @import 'govflanders/components/_input-field';
 @import 'govflanders/components/_input-group';
 @import 'govflanders/components/_link';
-@import 'govflanders/components/_loader';
 @import 'govflanders/components/_typography';
 @import 'govflanders/components/_upload';
 
@@ -53,7 +52,7 @@ $icon-font-location: '/fonts/'; // overrides the default location for flanders-i
 @import 'govflanders/additions/_button';
 @import 'govflanders/additions/_checkbox';
 @import 'govflanders/additions/_data-table';
-@import 'govflanders/additions/_loader';
+@import 'govflanders/additions/_not-supported';
 
 // Additions to existing utilities
 @import 'govflanders/additions/_background';
diff --git a/app/styles/govflanders/additions/_loader-link.scss b/app/styles/govflanders/additions/_loader-link.scss
deleted file mode 100644
index 9f79ffd7c8..0000000000
--- a/app/styles/govflanders/additions/_loader-link.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-/* ==========================================================================
-	 Addition:
-   * Different styling for loader link
-	 ========================================================================== */
-
-.vl-loader-link {
-  padding: 1em;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
diff --git a/app/styles/govflanders/additions/_loader.scss b/app/styles/govflanders/additions/_not-supported.scss
similarity index 85%
rename from app/styles/govflanders/additions/_loader.scss
rename to app/styles/govflanders/additions/_not-supported.scss
index a7764aefea..83431cff1a 100644
--- a/app/styles/govflanders/additions/_loader.scss
+++ b/app/styles/govflanders/additions/_not-supported.scss
@@ -1,4 +1,4 @@
-.vl-loader-container--not-supported {
+.vl-not-supported {
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/app/styles/govflanders/components/_loader.scss b/app/styles/govflanders/components/_loader.scss
deleted file mode 100644
index 64d944d2c7..0000000000
--- a/app/styles/govflanders/components/_loader.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.vl-loader {
-  display: inline-block;
-  position: relative;
-  width: 3rem;
-  height: $base-font-size;
-
-  &::before {
-    @include waveanim($alt-text-color, loader-wave);
-    position: absolute;
-    display: block;
-    content: "";
-    width: 0.4rem;
-    height: 0.4rem;
-    box-shadow: 1rem 0 $alt-text-color, 2rem 0 $alt-text-color, 3rem 0 $alt-text-color;
-    border-radius: 50%;
-    margin-top: -0.2rem;
-    margin-left: -2.2rem;
-    top: 50%;
-    left: 50%;
-  }
-}
diff --git a/cypress/integration/unit/agenda.spec.js b/cypress/integration/unit/agenda.spec.js
index f99f6f2886..dfb501f693 100644
--- a/cypress/integration/unit/agenda.spec.js
+++ b/cypress/integration/unit/agenda.spec.js
@@ -329,7 +329,7 @@ context('Agenda tests', () => {
     // TODO is deze not exists wel goed ?
     cy.get(agendaOverview.agendaEditFormallyOkButton).should('not.exist');
     // TODO hoe weten we dat assert goed werkt tenzij we wachten tot de actie afgerond is
-    // cy.get('.vl-loader', {
+    // cy.get('.auk-loader', {
     //   timeout: 60000,
     // }).should('not.exist');
     cy.contains(newSubcase2TitleShort).should('not.exist');
diff --git a/cypress/support/commands/agenda-commands.js b/cypress/support/commands/agenda-commands.js
index 33665d4990..feeb45944c 100644
--- a/cypress/support/commands/agenda-commands.js
+++ b/cypress/support/commands/agenda-commands.js
@@ -469,7 +469,7 @@ function addAgendaitemToAgenda(caseTitle, postponed) {
             cy.get('.vl-checkbox--switch__label').click();
           });
       }
-      cy.get('.vl-loader', {
+      cy.get('.auk-loader', {
         timeout: 12000,
       }).should('not.exist');
       if (caseTitle) {
@@ -481,7 +481,7 @@ function addAgendaitemToAgenda(caseTitle, postponed) {
         cy.wait('@getSubcasesFiltered', {
           timeout: 12000,
         });
-        cy.get('.vl-loader').should('not.exist');
+        cy.get('.auk-loader').should('not.exist');
         cy.get('table > tbody > tr').as('rows');
       } else {
         cy.get('table > tbody > tr').as('rows');
@@ -489,7 +489,7 @@ function addAgendaitemToAgenda(caseTitle, postponed) {
           timeout: 12000,
         }).should('not.have.length', 1);
       }
-      cy.get('.vl-loader').should('not.exist');
+      cy.get('.auk-loader').should('not.exist');
       cy.get('@rows', {
         timeout: 12000,
       }).eq(0)