diff --git a/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx b/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx
index 0084d82a550..07186be5e8c 100644
--- a/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx
+++ b/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx
@@ -4,6 +4,7 @@ import React, { CSSProperties } from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 
 import { useStyles2 } from '../../themes';
+import { handleReducedMotion } from '../../utils/handleReducedMotion';
 
 export interface LoadingBarProps {
   width: number;
@@ -52,10 +53,17 @@ const getStyles = (_theme: GrafanaTheme2, delay: number, duration: number) => {
       animationName: animation,
       // an initial delay to prevent the loader from showing if the response is faster than the delay
       animationDelay: `${delay}ms`,
-      animationDuration: `${duration}ms`,
       animationTimingFunction: 'linear',
       animationIterationCount: 'infinite',
       willChange: 'transform',
+      ...handleReducedMotion(
+        {
+          animationDuration: `${duration}ms`,
+        },
+        {
+          animationDuration: `${4 * duration}ms`,
+        }
+      ),
     }),
   };
 };