Developer mode
Opens components on the React tab by default.
Your bookmarks

Loading

Lets users know that content is being loaded.

No one likes waiting. And they like it even less if they don’t know that something is happening. Let users know that progress is being made so they don’t give up on the experience.

This is especially helpful after user input, so the user knows that they don’t need to repeat their action. Consider adding a message to let users know what is happening. Read or listen to more about progress indicators.

Component status

Figma
Released
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released

Content structure

Animation: varies based on loading type; text: optionally lets users know what is happening.

Guidelines       

Use the right type

Differ loading types take up different spaces and create certain expectations in users. Choose the loading type to correspond to the content that will be loaded.

import Button from "@kiwicom/orbit-components/lib/Button";
import Card from "@kiwicom/orbit-components/lib/Card";
import CardSection from "@kiwicom/orbit-components/lib/Card/CardSection";
import Heading from "@kiwicom/orbit-components/lib/Heading";
import Loading from "@kiwicom/orbit-components/lib/Loading";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import Text from "@kiwicom/orbit-components/lib/Text";
() => (
  <Stack>
    <Stack spacing="XXXSmall">
      <Heading as="h3" type="title3">
        Page loader
      </Heading>
      <Text>Useful when an entire page is loading.</Text>
      <Loading />
    </Stack>
    <Stack spacing="XXXSmall">
      <Heading as="h3" type="title3">
        Box loader
      </Heading>
      <Text>
        Useful when content in boxes like cards and card sections is being
        loaded.
      </Text>
      <Card loading title="Interesting facts">
        <CardSection>Interesting facts about travel</CardSection>
      </Card>
      <Card title="Interesting facts">
        <CardSection>
          <Loading type="boxLoader" loading>
            Interesting facts about travel
          </Loading>
        </CardSection>
      </Card>
    </Stack>
    <Stack spacing="XXXSmall">
      <Heading as="h3" type="title3">
        Button loader
      </Heading>
      <Text>
        Useful when a user has interacted with a button to show that something
        is happening.
      </Text>
      <Button loading>Save</Button>
    </Stack>
    <Stack spacing="XXXSmall">
      <Heading as="h3" type="title3">
        Inline loader
      </Heading>
      <Text>
        Useful when content in paragraphs and other inline elements is being
        loaded.
      </Text>
      <Loading type="inlineLoader" />
    </Stack>
    <Stack spacing="XXXSmall">
      <Heading as="h3" type="title3">
        Search loader
      </Heading>
      <Text>Useful when waiting for the results of a search.</Text>
      <Loading type="searchLoader" />
    </Stack>
  </Stack>
)

Let users know what’s happening

Loading components help show users progress is being made. Make it clear what the progress will lead to with helpful text indicating what’s coming or what action is being taken.

import Loading from "@kiwicom/orbit-components/lib/Loading";
import Stack from "@kiwicom/orbit-components/lib/Stack";
() => (
  <Stack direction="column">
    <Loading
      type="inlineLoader"
      text="Hang on while we retrieve the best flights"
    />
    <Loading type="inlineLoader" text="Saving your request" />
    <Loading
      type="inlineLoader"
      text="Finding the best routes to get you there"
    />
  </Stack>
)