Loader
Examples
Variants
Indeterminate
Aria label and message
Aria label and message
Importing
Properties
Custom Properties
Parts

Loader

<terra-loader> | TerraLoader

Since 1.0

stable

Loaders are used to indicate there is content that is loading.

<terra-loader percent='50'></terra-loader>

import TerraLoader from '@nasa-terra/components/dist/react/loader';

const App = () => <TerraLoader></TerraLoader>;

Examples

Variants

Use the variant attribute to change the style of the loader.

<terra-loader variant='small' percent='33'></terra-loader>
<terra-loader variant='large' percent='33'></terra-loader>
<terra-loader variant='orbit' percent='33'></terra-loader>

import TerraLoader from '@nasa-terra/components/dist/react/loader';

const App = () => (
    <>
        <TerraLoader varaiant="small" percent='33'></TerraLoader>
        <TerraLoader variant="large" percent='33'></TerraLoader>
        <TerraLoader variant="orbit" percent='33'></TerraLoader>
    </>
);

Indeterminate

Use the indeterminate attribute to show a spinner.

<terra-loader indeterminate variant='small'></terra-loader>
<terra-loader indeterminate variant='large'></terra-loader>
<terra-loader indeterminate variant='orbit'></terra-loader>

import TerraLoader from '@nasa-terra/components/dist/react/loader';

const App = () => (
    <>
        <TerraLoader indeterminate size='small'></TerraLoader>
        <TerraLoader indeterminate size='large'></TerraLoader>
        <TerraLoader indeterminate size='orbit'></TerraLoader>
    </>
);

Aria label and message

<terra-loader label='Loading video of Tropical Storm Nepartak' message='25% completed (262.5 MB of 350 MB remaining)' percent='25'></terra-loader>

import TerraLoader from '@nasa/terra-ui-components/dist/react/loader';

const App = () => (
    <>
        <TerraLoader label='Loading video of Tropical Storm Nepartak' message='25% completed (262.5 MB of 350 MB remaining)' percent='25'></TerraLoader>
    </>
);

Aria label and message

<terra-loader label='Loading video of Tropical Storm Nepartak' message='25% completed (262.5 MB of 350 MB remaining)' percent='25'></terra-loader>

import TerraLoader from '@nasa-terra/components/dist/react/loader';

const App = () => (
    <>
        <TerraLoader label='Loading video of Tropical Storm Nepartak' message='25% completed (262.5 MB of 350 MB remaining)' percent='25'></TerraLoader>
    </>
);

[component-metadata:terra-loader]

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script

Import

Bundler

React

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/loader/loader.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/loader/loader.js';

To import this component using a bundler:

import '@nasa-terra/components/dist/components/loader/loader.js';

To import this component as a React component:

import TerraLoader from '@nasa-terra/components/dist/react/loader';

Properties

Name	Description	Type	Default
`variant`	The loader’s variant	`'small' \| 'large' \| 'orbit'`	`'large'`
`percent`	The percent complete for the loader to display	`string`	`'0'`
`indeterminate`	an indeterminate loader has an unknown progress and will show a spinner	`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Custom Properties

Name	Description	Default
`--example`	An example CSS custom property.

Learn more about customizing CSS custom properties.

Parts

Name	Description
`base`	The component’s base wrapper.

Learn more about customizing CSS parts.