Loading

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">
  <D />
</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]">
    <D
      duration="250ms"
      size={48}
    />
  </div>
</div>

Dots Loading

1
2
3
4
5
6
7
8
9
10
11

<div className="flex flex-col gap-4 justify-center items-center">
  <div className="flex items-center gap-4 text-[#00FFFF]">
    <D type="dots" />
  </div>
  <div className="flex items-center gap-4 text-[#00FFFF]">
    <D
      duration="400ms"
      type="dots"
    />
  </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 SVG element props.

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