Progress

Use to visually represent the completion of a task or process.

import {
  reactExtension,
  Progress,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <Progress accessibilityLabel="Loading" />
  );
}

import {extension, Progress} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const baseProgress = root.createComponent(Progress, {
    accessibilityLabel: 'Loading',
  });

  root.appendChild(baseProgress);
});

ProgressProps

ProgressProps

accessibilityLabel

A label to use for the Progress that will be used for buyers using assistive technologies like screen readers. It will also be used to replace the animated loading indicator when buyers prefer reduced motion.

id

A unique identifier for the component.

max

Define the maximum limit of the progress element. It must have a value greater than 0 and be a valid floating point number.

tone

Set the color of the progress bar.

value

Specify how much of the task that has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted. When undefined, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.

Tone

'auto' | 'critical'

Related

• Spinner

Examples

Use to visually represent the completion of a task or process.

In a determinate state, [TextBlock](../titles-and-text/textblock) or [Text](../titles-and-text/text) components can be used to communicate what the progress bar is tracking, and to set clear expectations about the current progress.

import {
  reactExtension,
  BlockStack,
  Grid,
  Progress,
  Text,
  TextBlock,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.footer.render-after',
  () => <Extension />,
);

function Extension() {
  const label = 'Queue process';
  return (
    <BlockStack>
      <Grid columns={['fill', 'auto']}>
        <Text>{label}</Text>
        <Text appearance="subdued">
          45% completed
        </Text>
      </Grid>
      <Progress
        value={45}
        max={100}
        accessibilityLabel={label}
      />
      <TextBlock appearance="subdued">
        Estimated wait time: 4 minutes
      </TextBlock>
    </BlockStack>
  );
}

import {
  extension,
  BlockStack,
  Grid,
  Progress,
  Text,
  TextBlock,
} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.block.render',
  (root) => {
    const label = 'Queue process';

    const progress = root.createComponent(
      BlockStack,
      null,
      [
        root.createComponent(
          Grid,
          {
            columns: ['fill', 'auto'],
          },
          [
            root.createComponent(
              Text,
              null,
              label,
            ),
            root.createComponent(
              Text,
              {
                appearance: 'subdued',
              },
              '45% completed',
            ),
          ],
        ),
        root.createComponent(Progress, {
          value: 45,
          max: 100,
          accessibilityLabel: label,
        }),
        root.createComponent(
          TextBlock,
          {
            appearance: 'subdued',
          },
          'Estimated wait time: 4 minutes',
        ),
      ],
    );

    root.appendChild(progress);
  },
);

import {
  reactExtension,
  BlockStack,
  Grid,
  Progress,
  Text,
  TextBlock,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.footer.render-after',
  () => <Extension />,
);

function Extension() {
  const label = 'Queue process';
  return (
    <BlockStack>
      <Grid columns={['fill', 'auto']}>
        <Text>{label}</Text>
        <Text appearance="subdued">
          45% completed
        </Text>
      </Grid>
      <Progress
        value={45}
        max={100}
        accessibilityLabel={label}
      />
      <TextBlock appearance="subdued">
        Estimated wait time: 4 minutes
      </TextBlock>
    </BlockStack>
  );
}

import {
  extension,
  BlockStack,
  Grid,
  Progress,
  Text,
  TextBlock,
} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.block.render',
  (root) => {
    const label = 'Queue process';

    const progress = root.createComponent(
      BlockStack,
      null,
      [
        root.createComponent(
          Grid,
          {
            columns: ['fill', 'auto'],
          },
          [
            root.createComponent(
              Text,
              null,
              label,
            ),
            root.createComponent(
              Text,
              {
                appearance: 'subdued',
              },
              '45% completed',
            ),
          ],
        ),
        root.createComponent(Progress, {
          value: 45,
          max: 100,
          accessibilityLabel: label,
        }),
        root.createComponent(
          TextBlock,
          {
            appearance: 'subdued',
          },
          'Estimated wait time: 4 minutes',
        ),
      ],
    );

    root.appendChild(progress);
  },
);