add ProgressCircular example

Author: gioboa

apps/qwik-demo-app/src/routes/ProgressCircular/ProgressCircularColors/index.tsx

@@ -0,0 +1,12 @@
+import { component$ } from '@builder.io/qwik';
+import { SfProgressCircular } from 'qwik-storefront-ui';
+
+export default component$(() => {
+  return (
+    <div class="flex gap-4 flex-wrap">
+      <SfProgressCircular class="!text-cyan-700" value={70} size="3xl" />
+      <SfProgressCircular size="3xl" value={70} />
+      <SfProgressCircular class="!ring-yellow-200" value={70} size="3xl" />
+    </div>
+  );
+});

apps/qwik-demo-app/src/routes/ProgressCircular/ProgressCircularFloatingLabel/index.tsx

@@ -0,0 +1,44 @@
+import { component$ } from '@builder.io/qwik';
+import { SfProgressCircular } from 'qwik-storefront-ui';
+
+export default component$(() => {
+  const value = 70;
+
+  return (
+    <div class="flex gap-4 flex-wrap">
+      <SfProgressCircular size="2xl" value={value}>
+        <text
+          class="font-medium"
+          textAnchor="middle"
+          alignmentBaseline="central"
+          x="100%"
+          y="100%"
+        >
+          {value}%
+        </text>
+      </SfProgressCircular>
+      <SfProgressCircular size="3xl" value={value}>
+        <text
+          class="font-medium fill-neutral-400"
+          textAnchor="middle"
+          alignmentBaseline="central"
+          x="100%"
+          y="100%"
+        >
+          {value}%
+        </text>
+      </SfProgressCircular>
+      <SfProgressCircular size="3xl" value={value}>
+        <text
+          class="font-medium text-2xs"
+          textAnchor="middle"
+          alignmentBaseline="central"
+          x="100%"
+          y="100%"
+        >
+          {value}%
+        </text>
+      </SfProgressCircular>
+    </div>
+  );
+});

apps/qwik-demo-app/src/routes/ProgressCircular/ProgressCircularSizes/index.tsx

@@ -0,0 +1,18 @@
+import { component$ } from '@builder.io/qwik';
+import { SfProgressCircular } from 'qwik-storefront-ui';
+
+export default component$(() => {
+  return (
+    <div class="flex flex-col gap-4 flex-wrap sm:flex-row mr-6 mb-6">
+      <SfProgressCircular value={30} size="xs" />
+      <SfProgressCircular value={30} size="sm" />
+      <SfProgressCircular value={30} size="base" />
+      <SfProgressCircular value={30} />
+      <SfProgressCircular value={30} size="lg" />
+      <SfProgressCircular value={30} size="xl" />
+      <SfProgressCircular value={30} size="2xl" />
+      <SfProgressCircular value={30} size="3xl" />
+      <SfProgressCircular value={30} size="4xl" />
+    </div>
+  );
+});