aws-animated-ellipsis

A tiny React component for inline loading text, such as:

import { AnimatedEllipsis } from 'aws-animated-ellipsis';

export function LoadingLabel() {
  return (
    <span>
      Summary is generating in progress
      <AnimatedEllipsis />
    </span>
  );
}

The animation cycles through:

inactive -> . -> .. -> ... -> inactive

Inactive dots stay faint, so the reserved width does not jump while the text is rendering.

Install

npm install aws-animated-ellipsis

Props

| Prop | Type | Default | | --- | --- | --- | | className | string | undefined | | dotClassName | string | undefined | | style | React.CSSProperties | undefined | | dotStyle | React.CSSProperties | undefined | | intervalMs | number | 250 | | inactiveOpacity | number | 0.15 | | activeOpacity | number | 1 | | dotCount | number | 3 | | dot | string | "." | | width | number \| string | "1.15em" | | gap | number \| string | 0 | | ariaHidden | boolean | true |

Styling Example

<AnimatedEllipsis
  intervalMs={250}
  inactiveOpacity={0.15}
  width="1.15em"
  style={{ marginLeft: '0.05rem', color: '#111827' }}
/>