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" />