From b23ed5b1f28be15d34b1ee086feb54b6bad330f8 Mon Sep 17 00:00:00 2001
From: Alexandra Vargas <alexa1866@gmail.com>
Date: Tue, 29 Nov 2022 13:51:21 +0100
Subject: [PATCH] dashboards squad mob! :trident:

---
 .../src/components/LoadingBar/LoadingBar.tsx   | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

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
+        })
+    };
 };