ProgressCircular

import { SfProgressCircular } from '@storefront-ui/react';

export default function ProgressCircularSizes() {
  return (
    <div className="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>
  );
}

import { SfProgressCircular } from '@storefront-ui/react';

export default function ProgressCircularColors() {
  return (
    <div className="flex gap-4 flex-wrap">
      <SfProgressCircular className="!text-cyan-700" value={70} size="3xl" />
      <SfProgressCircular size="3xl" value={70} />
      <SfProgressCircular className="!ring-yellow-200" value={70} size="3xl" />
    </div>
  );
}

import { SfProgressCircular } from '@storefront-ui/react';

export default function ProgressCircularWithLabels() {
  const value = 70;

  return (
    <div className="flex gap-4 flex-wrap">
      <SfProgressCircular size="2xl" value={value}>
        <text className="font-medium" textAnchor="middle" alignmentBaseline="central" x="100%" y="100%">
          {value}%
        </text>
      </SfProgressCircular>
      <SfProgressCircular size="3xl" value={value}>
        <text
          className="font-medium fill-neutral-400"
          textAnchor="middle"
          alignmentBaseline="central"
          x="100%"
          y="100%"
        >
          {value}%
        </text>
      </SfProgressCircular>
      <SfProgressCircular size="3xl" value={value}>
        <text className="font-medium text-2xs" textAnchor="middle" alignmentBaseline="central" x="100%" y="100%">
          {value}%
        </text>
      </SfProgressCircular>
    </div>
  );
}