DottedLoader

A loading indicator with animated dots.

Installation

npm install @cleartrip/ct-design-dotted-loader
# or
pnpm add @cleartrip/ct-design-dotted-loader

Peer dependencies

# Required for all targets
npm install react

# Web only
npm install react-dom

# React Native only
npm install react-native

Usage

Basic

import { DottedLoader } from '@cleartrip/ct-design-dotted-loader';

function Example() {
  return (
    <DottedLoader>
      {/* Basic usage */}
    </DottedLoader>
  );
}

Props

| Prop | Type | Default | Required | Description | |------|------|---------|----------|-------------| | variant | LoaderVariant | — | No | Size variant for the loader dots. Defaults to 'medium'. | | styleConfig | IDottedLoaderStyleConfig | — | No | styleConfig slots for fine-grained style overrides. | | css | CSSProperties | — | No | existing overrides continue to win on web. |

DottedLoaderSize

• SMALL — small
• MEDIUM — medium
• LARGE — large

Accessibility

• The component follows accessibility best practices
• Ensure proper ARIA attributes are provided where needed
• Test with screen readers to ensure usability

Migration

If migrating from a previous version:

- import { DottedLoader } from 'yagami/core/components';
+ import { DottedLoader } from '@cleartrip/ct-design-dotted-loader';