diff --git a/packages/grafana-ui/src/components/LoadingBar/LoadingBar.mdx b/packages/grafana-ui/src/components/LoadingBar/LoadingBar.mdx
index 80cb225ba28..563adb0662a 100644
--- a/packages/grafana-ui/src/components/LoadingBar/LoadingBar.mdx
+++ b/packages/grafana-ui/src/components/LoadingBar/LoadingBar.mdx
@@ -1,4 +1,4 @@
-import { Meta, Preview, Props } from '@storybook/addon-docs/blocks';
+import { Meta, Preview, ArgsTable } from '@storybook/addon-docs/blocks';
 import { LoadingBar } from './LoadingBar';
 
 <Meta title="MDX|LoadingBar" component={LoadingBar} />
@@ -6,3 +6,17 @@ import { LoadingBar } from './LoadingBar';
 # LoadingBar
 
 The LoadingBar is used as a simple loading slider animation in the top of its container.
+
+<Preview>
+  <div style={{ height: '200px', width: '400px' }}>
+    <LoadingBar containerWidth={400} height={2} width={128} />
+  </div>
+</Preview>
+
+```jsx
+<div style={{ height: '200px', width: '400px' }}>
+  <LoadingBar containerWidth={400} height={2} width={128} />
+</div>
+```
+
+<ArgsTable of={LoadingBar} />
diff --git a/packages/grafana-ui/src/components/LoadingBar/LoadingBar.story.tsx b/packages/grafana-ui/src/components/LoadingBar/LoadingBar.story.tsx
index ed6ed416259..f4da0e6406b 100644
--- a/packages/grafana-ui/src/components/LoadingBar/LoadingBar.story.tsx
+++ b/packages/grafana-ui/src/components/LoadingBar/LoadingBar.story.tsx
@@ -8,13 +8,17 @@ import { LoadingBar, LoadingBarProps, useStyles2 } from '@grafana/ui';
 import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
+import mdx from './LoadingBar.mdx';
+
 const meta: ComponentMeta<typeof LoadingBar> = {
   title: 'General/LoadingBar',
   component: LoadingBar,
   decorators: [withCenteredStory],
   parameters: {
     controls: {},
-    docs: {},
+    docs: {
+      page: mdx,
+    },
   },
 };