import { Meta, Preview, Story } from "@storybook/addon-docs/blocks";
import { Flex } from "../Flex";
import { Text } from "../Text";
import { Loading } from "./Loading";
export const ExampleContainer = ({ ...props }) => (
);
# Loading
Loading provides a loading animation.
```jsx
import { Loading } from "@aptible/arrow-ds";
```
## Custom Props
There are no custom props for this component. The props extend
[`BoxProps`](/?path=/docs/components-box--box#all-props).
## Demos
### Centering the loader
This example shows how you can center the loader in both directions within a
larger container using flexbox.
If you don’t need to center the loading component vertically, you can use margin
to center it horizontally.
### Loading with text
This example shows how you can add text above the loader while centering both.
Creating 8 SaaS Systems…
### On a dark background
This example shows how you can change the color of the loader when using on a
dark background.