diff --git a/apps/website/src/routes/examples/SfLoaderLinear/index.tsx b/apps/website/src/routes/examples/SfLoaderLinear/index.tsx
new file mode 100644
index 0000000..bd9e42e
--- /dev/null
+++ b/apps/website/src/routes/examples/SfLoaderLinear/index.tsx
@@ -0,0 +1,40 @@
+import { component$, useContext, useTask$ } from '@builder.io/qwik';
+import { SfLoaderLinear, SfLoaderSize } from 'qwik-storefront-ui';
+import { ComponentExample } from '../../../components/utils/ComponentExample';
+import { ControlsType } from '../../../components/utils/types';
+import { EXAMPLES_STATE } from '../layout';
+
+export default component$(() => {
+  const examplesState = useContext(EXAMPLES_STATE);
+
+  useTask$(() => {
+    examplesState.data = {
+      controls: [
+        {
+          type: 'select',
+          modelName: 'size',
+          propType: 'SfLoaderSize',
+          options: [...Object.keys(SfLoaderSize)],
+          description: 'sets sizes of components',
+        },
+        {
+          type: 'text',
+          modelName: 'ariaLabel',
+          propType: 'string',
+          propDefaultValue: 'loading',
+          description: 'sets text available for screen readers',
+        },
+      ] satisfies ControlsType,
+      state: {
+        size: SfLoaderSize.lg,
+        ariaLabel: 'loading',
+      },
+    };
+  });
+
+  return (
+    <ComponentExample>
+      <SfLoaderLinear class="w-12" {...examplesState.data.state} />
+    </ComponentExample>
+  );
+});