Loading Indicator

yarn add @clayui/loading-indicator

React Component
CSS / Markup

Stable3.0.0

The loading indicator shows the user that an external process, like a connection, is being executed.

Sizes
API

Take a look at our Storybook for more information about this component.

Check the Lexicon Loading Indicator Pattern for a more in-depth look at the motivations and proper usage of this component.

import ClayLoadingIndicator from '@clayui/loading-indicator';
import React from 'react';

import ClayLoadingIndicator from '@clayui/loading-indicator';
import React from 'react';

const Component = () => {
  return (
    <>
      <ClayLoadingIndicator />
    </>
  );
};

render(<Component />);

const Component = () => {
  return (
    <>
      <ClayLoadingIndicator />
    </>
  );
};
render(<Component />);

Use light property for setting the loading indicator to be more accessible in some cases.

import ClayLoadingIndicator from '@clayui/loading-indicator';
import React from 'react';

import ClayLoadingIndicator from '@clayui/loading-indicator';
import React from 'react';

const Component = () => {
  return (
    <div className="bg-dark">
      <ClayLoadingIndicator light />
    </div>
  );
};

render(<Component />);

const Component = () => {
  return (
    <div className="bg-dark">
      <ClayLoadingIndicator light />
    </div>
  );
};
render(<Component />);

Sizes

By default, the loading indicator is sized 16px but if you want a smaller version, you can try using the small property.

import ClayLoadingIndicator from '@clayui/loading-indicator';
import React from 'react';

import ClayLoadingIndicator from '@clayui/loading-indicator';
import React from 'react';

const Component = () => {
  return <ClayLoadingIndicator small />;
};

render(<Component />);

const Component = () => {
  return <ClayLoadingIndicator small />;
};
render(<Component />);

API

Property	Type	Required	Default	Description
light	boolean			Flag to indicate the 'light' variant
small	boolean			Flag to indicate the small size

The loading indicator shows the user that an external process, like a connection, is being executed.

Sizes
Variations
- Regular
- Light
Compositions
- Button
- Autocomplete

Check the Lexicon Loading Indicator Pattern for a more in-depth look at the motivations and proper usage of this component.

See the implementation of the Loading Indicator component in React following the Lexicon Loading Indicator Pattern.

These animations are made using only CSS.

Sizes

<span aria-hidden="true" class="loading-animation loading-animation-sm"></span>
<span aria-hidden="true" class="loading-animation"></span>

Variations

Regular

<span aria-hidden="true" class="loading-animation loading-animation"></span>

Light

<span
	aria-hidden="true"
	class="loading-animation loading-animation-light"
></span>

Compositions

Button

<button class="btn btn-primary" type="button">
	<span class="inline-item inline-item-before">
		<span aria-hidden="true" class="loading-animation"></span> </span
	>Loading
</button>

<button class="btn btn-secondary" type="button">
	<span class="inline-item inline-item-before">
		<span aria-hidden="true" class="loading-animation"></span> </span
	>Loading
</button>

<button class="btn btn-success" type="button">
	<span class="inline-item inline-item-before">
		<span aria-hidden="true" class="loading-animation"></span> </span
	>Loading
</button>

<button class="btn btn-info" type="button">
	<span class="inline-item inline-item-before">
		<span aria-hidden="true" class="loading-animation"></span> </span
	>Loading
</button>

<button class="btn btn-warning" type="button">
	<span class="inline-item inline-item-before">
		<span aria-hidden="true" class="loading-animation"></span> </span
	>Loading
</button>

<button class="btn btn-danger" type="button">
	<span class="inline-item inline-item-before">
		<span aria-hidden="true" class="loading-animation"></span> </span
	>Loading
</button>

<button class="btn btn-light" type="button">
	<span class="inline-item inline-item-before">
		<span aria-hidden="true" class="loading-animation"></span> </span
	>Loading
</button>

<button class="btn btn-dark" type="button">
	<span class="inline-item inline-item-before">
		<span aria-hidden="true" class="loading-animation"></span> </span
	>Loading
</button>

<button class="btn btn-link" type="button">
	<span class="inline-item inline-item-before">
		<span aria-hidden="true" class="loading-animation"></span> </span
	>Loading
</button>