diff --git a/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx b/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx
index c07e3356216..6d7c7305955 100644
--- a/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx
+++ b/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx
@@ -30,11 +30,19 @@ export const LoadingBar: React.FC<LoadingBarProps> = ({
   barColor = 'blue',
 }) => {
   const theme = useTheme2();
-  const styles = useStyles2(getStyles);
-
-  return <div style={{ width, height }}></div>;
+  const loadingStyles = getLoadingStyes(theme, width, height)
+  return <div class={loadingStyles.loading}></div>;
 };
 
-const getStyles = (theme: GrafanaTheme2) => {
-  return {};
+const getLoadingStyes = (theme: GrafanaTheme2, width, height) => {
+  return {
+      loading: css ({
+        width: "80px",
+        height: "10px",
+        backgroundColor: "blue";
+        position: "absolute";
+        animation: animate 1s infinite linear;
+        willChange: transform;:w
+        })
+    };
 };