@arcteryx/components-animated-ellipsis

Arcteryx Animated Ellipsis Component

Usage no npm install needed!

<script type="module">
  import arcteryxComponentsAnimatedEllipsis from 'https://cdn.skypack.dev/@arcteryx/components-animated-ellipsis';
</script>

README

@arcteryx/components-animated-ellipsis

What is it?

A common Animated Ellipsis component with 3 sizes available.

Install

npm install --save @arcteryx/components-animated-ellipsis

Usage

import { AnimatedEllipsis } from "@arcteryx/components-animated-ellipsis";

<AnimatedEllipsis />

<AnimatedEllipsis size="small" />

<AnimatedEllipsis size="large" />

<span>
  Loading<AnimatedEllipsis />
</span>

Configuration

There is a size props that can be used to show a different size

  • small: The height & width is "0.125rem". The margin is "0 0.125rem".
  • large: The height & width is "1rem". The margin is "1em 0.5em".
  • default: The height & width is "0.25rem". The margin is "0 0.125em".