Loading Component

The Loading component provides a sleek, animated loading indicator featuring three pulsating circles. It's designed to provide visual feedback during asynchronous operations or loading states in your application.

Usage

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

Examples

Default

1
2
3

<div className="flex items-center gap-4 justify-center">
  <k />
</div>

Size and Segment duration

1
2
3
4
5
6
7
8

<div className="flex flex-col gap-4 justify-center items-center">
  <div className="flex items-center gap-4 text-[#00FFFF]">
    <k
      dur={250}
      size={48}
    />
  </div>
</div>

Customization

The Loading component is highly customizable:

• Color: Inherits the text color of its parent element through the fill-current class
• Size: Adjustable through width and height props
• Animation Speed: Configurable animation duration
• Responsive: Adapts seamlessly to different container sizes

Props

The component also accepts all standard HTML attributes supported by the underlying SVG element.

Accessibility

The Loading component is built with accessibility in mind:

• Includes appropriate ARIA attributes
• Provides visual feedback without relying on color alone
• Maintains good contrast ratios

Best Practices

• Use consistent sizes within the same context
• Place the loader in a logical location relative to the content being loaded
• Consider using a minimum display duration to prevent flickering
• Ensure sufficient contrast between the loader and its background