Progress

Examples

• Indeterminate state

  React

  import {
    reactExtension,
    Progress,
  } from '@shopify/ui-extensions-react/checkout';
  
  export default reactExtension(
    'purchase.checkout.block.render',
    () => <Extension />,
  );
  
  function Extension() {
    return (
      <Progress accessibilityLabel="Loading" />
    );
  }
  

  JS

  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);
  });
  

• Determinate state

  Description

  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.

  React

  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>
    );
  }
  

  JavaScript

  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);
    },
  );