Loading

An inline, animated spinner to indicate data loading or processing.

It implements the <svg> element.

The surrounding text color determines the spinner’s color.

Styles

Import the styles within a Next.js custom app in pages/_app.js.
import 'device-agnostic-ui/public/components/Loading.css';

Props

size

TypeString (optional)
Default'1em'

Sets the <svg> element’s width and height attributes. Some browser versions don’t support rem units.

title

TypeString (optional)
Default'Loading'

Sets the <svg> element’s <title> children.

...props

Type…* (optional)

Additional props for the container; an <svg> element. children can’t be used.

Examples

Deep import.
import Loading from 'device-agnostic-ui/public/components/Loading.js';
Deep require.
const Loading = require('device-agnostic-ui/public/components/Loading');
Index import. Convenient, but technically inferior to a deep import.
import { Loading } from 'device-agnostic-ui';
Index require. Convenient, but technically inferior to a deep require.
const { Loading } = require('device-agnostic-ui');
A loading indicator.
import { Loading } from 'device-agnostic-ui';

const result = <Loading size="2em" />;
Loading