Loading Component

The Loading component is a simple yet customizable animated loading indicator that displays three pulsating circles in a row.

Usage

import { Loading } from "@unkey/ui";
 
function MyComponent() {
  return <Loading />;
}

Examples

Default Loading

1

<w />

Custom Size

1
2
3
4

<w
  height={100}
  width={100}
/>

Custom Animation Speed

1

<w dur="1s" />

Custom Color

The loading indicator inherits its color from the parent element's text color using the fill-current class.

Props

The Loading component accepts the following props:

Additionally, the component accepts all standard SVG element props as it renders an SVG under the hood.

Implementation Details

The loading animation is implemented using SVG animations (<animate>) that smoothly transition the radius of three circles between their maximum (3) and minimum (0.2) values. The animations are chained together with precise timing to create a smooth wave-like effect.

The component is built with accessibility in mind and can be styled using Tailwind CSS classes through its parent elements.