Loading Indicator

yarn add @clayui/loading-indicator

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

React Component
CSS / Markup

Light
Small
API

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

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

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

render(<Component />);

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

Light

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

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

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

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

render(<Component />);

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

Small

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 ClayLoadingIndicator from '@clayui/loading-indicator';

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

render(<Component />);

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

API

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

Sizes
Variations
- Regular
- Light
Compositions
- Button
- Autocomplete

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>