Demo
Usage
Import the Loader component and styles.
import { Loader } from '@aws-amplify/ui-react';
export const DefaultLoaderExample = () => {
return <Loader />;
};
Sizes
Use the size prop to change the Loader size. Available options are small, large, and none (default).
import { Flex, Loader } from '@aws-amplify/ui-react';
export const LoaderSizesExample = () => {
return (
<Flex alignItems="center">
<Loader size="small" />
<Loader />
<Loader size="large" />
</Flex>
);
};
Variation
Loader comes in 2 variants, linear and none(default). Pass the variation prop and set it to either of these values.
import { Loader } from '@aws-amplify/ui-react';
export const LoaderVariationExample = () => {
return (
<>
<Loader />
<Loader variation="linear" />
</>
);
};
Colors
Pass filledColor and emptyColor props to color your own Loader.
import { Loader, useTheme } from '@aws-amplify/ui-react';
export const LoaderColorExample = () => {
const { tokens } = useTheme();
return (
<>
<Loader
emptyColor={tokens.colors.black}
filledColor={tokens.colors.orange[40]}
/>
<Loader
variation="linear"
emptyColor={tokens.colors.black}
filledColor={tokens.colors.orange[40]}
/>
</>
);
};
Determinate
Most often loaders are indeterminate (looped) but may be determinate (percentage-based) when the system can calculate the size of the request — for example, when downloading a large file. To use a determinate loader, set isDeterminate to true and pass percentage.
import * as React from 'react';
import { Loader } from '@aws-amplify/ui-react';
export const DeterminateLoaderExample = () => {
const [percentage, setPercentage] = React.useState(0);
React.useEffect(() => {
const clearID = setInterval(() => {
setPercentage((percentage) => {
if (percentage < 100) {
return percentage + 1;
}
return 0;
});
}, 1000);
return () => clearInterval(clearID);
}, []);
return (
<>
<Loader percentage={percentage} isDeterminate />
<Loader variation="linear" percentage={percentage} isDeterminate />
</>
);
};
To hide the percentage text, set isPercentageTextHidden to true.
import { Loader } from '@aws-amplify/ui-react';
export const LoaderIsPercentageTextHiddenExample = () => {
return <Loader percentage={60} isDeterminate isPercentageTextHidden />;
};
Accessibility
The Loader is a SVG image with role set to img on the outer <svg> element. This will tell screen readers to just consider it as a single entity and describe it using the label, rather than trying to read out all the child nodes. You can give it a label by passing ariaLabel prop.
import { Loader } from '@aws-amplify/ui-react';
export const LoaderAccessibilityExample = () => {
return <Loader ariaLabel="Loading..." />;
};
CSS Styling
Theme
You can customize the appearance of all Loader components in your application with a Theme.
Loader Theme Source
import { Loader, Flex, ThemeProvider, Theme } from '@aws-amplify/ui-react';
const theme: Theme = {
name: 'loader-theme',
tokens: {
components: {
loader: {
strokeEmpty: { value: '{colors.neutral.20}' },
strokeFilled: { value: '{colors.green.80}' },
// sizes
large: {
width: { value: '{fontSizes.xxxl}' },
height: { value: '{fontSizes.xxxl}' },
},
// linear loader
linear: {
width: { value: '50%' },
strokeWidth: { value: '{fontSizes.xxs}' },
strokeFilled: { value: '{colors.secondary.80}' },
strokeEmpty: { value: '{colors.neutral.20}' },
animationDuration: { value: '2s' },
},
},
},
},
};
export const LoaderThemeExample = () => (
<ThemeProvider theme={theme} colorMode="light">
<Flex direction="column">
<Loader size="large" />
<Loader variation="linear" />
</Flex>
</ThemeProvider>
);
Target classes
| Class | Description |
|---|---|
amplify-loader | Top level element that wraps the Loader primitive |
amplify-loader__label | Class applied to the track of loader |
--amplify-components-loader-animation-duration--amplify-components-loader-font-size--amplify-components-loader-height--amplify-components-loader-large-font-size--amplify-components-loader-large-height--amplify-components-loader-large-width--amplify-components-loader-linear-animation-duration--amplify-components-loader-linear-font-size--amplify-components-loader-linear-large-font-size--amplify-components-loader-linear-large-stroke-width--amplify-components-loader-linear-min-width--amplify-components-loader-linear-small-font-size--amplify-components-loader-linear-small-stroke-width--amplify-components-loader-linear-stroke-empty--amplify-components-loader-linear-stroke-filled--amplify-components-loader-linear-stroke-linecap--amplify-components-loader-linear-stroke-width--amplify-components-loader-linear-width--amplify-components-loader-small-font-size--amplify-components-loader-small-height--amplify-components-loader-small-width--amplify-components-loader-stroke-empty--amplify-components-loader-stroke-filled--amplify-components-loader-stroke-linecap--amplify-components-loader-text-fill--amplify-components-loader-width
Global styling
To override styling on all Loaders, you can set the Amplify CSS variables with the built-in .amplify-loader class.
/* styles.css */
.amplify-loader {
--amplify-components-loader-stroke-filled-color: var(--amplify-colors-red-80);
}
import { Loader } from '@aws-amplify/ui-react';
import './styles.css';
<Loader />;
Local styling
To override styling on a specific Loader, you can use (in order of increasing specificity): a class selector, data attributes, or style props.
Using a class selector:
/* styles.css */
.my-loader {
width: 5rem;
height: 5rem;
}
import { Loader } from '@aws-amplify/ui-react';
import './styles.css';
<Loader className="my-loader" />;
Using data attributes:
/* styles.css */
.amplify-loader[data-size='large'] {
width: 5rem;
height: 5rem;
}
import { Loader } from '@aws-amplify/ui-react';
import './styles.css';
<Loader variation="large" />;
Using style props:
import { Loader } from '@aws-amplify/ui-react';
<Loader width="5rem" height="5rem" />