Transaction progress banner

On this page

Template anatomy
See demo

Transaction progress banner

A transaction progress bar should deliver all the information a user needs about their transaction at a glance. While allowing them to continue to use your dApp.


10%
Sending...
Less than 3 minutes remaining
Details 
// import { Modal, Box, Flex, Icon, Text, Link } from "rimble-ui";

<Flex flexDirection="column">
  <Box width="10%" height="8px" bg="success" />
  <Box p={[2, 3]} color="near-white" width="100%" bg="dark-gray">
    <Flex
      flexDirection="row"
      justifyContent="space-between"
      alignItems="center"
    >
      <Flex alignItems="center">
        <Flex
          mr={[2, 3]}
          bg={"silver"}
          borderRadius={"50%"}
          height={"3em"}
          width={"3em"}
          minWidth={"3em"}
          justifyContent={"center"}
          alignItems={"center"}
        >
          <Text>10%</Text>
        </Flex>
        <Flex flexDirection="column">
          <Text fontWeight="bold">Sending...</Text>
          <Text fontSize={1}>Less than 3 minutes remaining</Text>
        </Flex>
      </Flex>
      <Link color="primary-lighter" ml={[2, 3]}>
        <Flex alignItems="center">
          Details
          <Icon ml={1} name="Launch" size="16px" />
        </Flex>
      </Link>
    </Flex>
  </Box>
</Flex>// import { Modal, Box, Flex, Icon, Text, Link } from "rimble-ui";
<Flex flexDirection="column">
  <Box width="10%" height="8px" bg="success" />
  <Box p={[2, 3]} color="near-white" width="100%" bg="dark-gray">
    <Flex
      flexDirection="row"
      justifyContent="space-between"
      alignItems="center"
    >
      <Flex alignItems="center">
        <Flex
          mr={[2, 3]}
          bg={"silver"}
          borderRadius={"50%"}
          height={"3em"}
          width={"3em"}
          minWidth={"3em"}
          justifyContent={"center"}
          alignItems={"center"}
        >
          <Text>10%</Text>
        </Flex>
        <Flex flexDirection="column">
          <Text fontWeight="bold">Sending...</Text>
          <Text fontSize={1}>Less than 3 minutes remaining</Text>
        </Flex>
      </Flex>
      <Link color="primary-lighter" ml={[2, 3]}>
        <Flex alignItems="center">
          Details
          <Icon ml={1} name="Launch" size="16px" />
        </Flex>
      </Link>
    </Flex>
  </Box>
</Flex>

Template anatomy

An annotated image calling out the different elements of the template

1. Progress bar and percentage

This should let the user know how complete their transaction is and give a sense of how much longer they'll need to wait. Learn how we did this.

2. Progress message

This tells the user that their intended action is in progress. This message should reflect what the user is trying to achieve e.g. "Sending ETH" or "Buying BAT" etc.

3. Secondary message

Use this space to provide a time estimate for the transaction. Using the same method as the Progress bar and percentage.

4. Link

Gives you the opportunity to link interested users to more information, via Etherscan for example.

See demo

An illustration of Rimble's transaction UX journey

Transaction demo

Our transaction states demo, presented at Devcon V, shows methods for updating a user on the status of their transaction.

Transaction states demo

Transaction progress banner

Transaction progress banner

Template anatomy

1. Progress bar and percentage

2. Progress message

3. Secondary message

4. Link

See demo

Transaction demo

Navigate the guide