Vue Interface

Appearance

Activity Indicator ​

Activity Indicator provides a collection of animated indicators that you can use to match different styles or loading contexts. Each variant has customizable sizing and styling, making it easy to integrate your UI.

To use an indicator, specify a :type=[indicator] prop, and size=[size] prop. Add a class=[custom size or color] class to customize the size or color of the indicator.

Installation ​

bash
pnpm i @vue-interface/activity-indicator
bash
yarn add @vue-interface/activity-indicator
bash
npm i @vue-interface/activity-indicator
bash
bun i @vue-interface/activity-indicator

Tailwind Setup ​

css
@import '@vue-interface/activity-indicator';
@import '@vue-interface/activity-indicator/css';

Sizing ​

The size of all indicators can be customized using predetermined size classes: 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl,5xl.

vue
<ActivityIndicator :type="Dots" size="activity-indicator-lg"></ActivityIndicator>

For more granular control over indicator sizes, use Tailwind's numeric sizing scale classes: activity-indicator-1 - activity-indicator-96.

vue
<ActivityIndicator :type="Dots" size="activity-indicator-3"></ActivityIndicator>

For precise sizing, specify exact pixel values using the syntax activity-indicator-[Npx] or any other CSS length units (rem, em, mm, etc.).

vue
<ActivityIndicator :type="Dots" size="activity-indicator-[16px]"></ActivityIndicator>

Custom Colors ​

To customize the color of the indicator, use the class: activity-indicator-[color].

vue
<ActivityIndicator :type="Dots" class="activity-indicator-red-700"></ActivityIndicator>
<ActivityIndicator :type="Dots" class="activity-indicator-yellow-700"></ActivityIndicator>
<ActivityIndicator :type="Dots" class="activity-indicator-green-700"></ActivityIndicator>
<ActivityIndicator :type="Dots" class="activity-indicator-blue-700"></ActivityIndicator>

Dots ​

Show Code
vue
<ActivityIndicator :type="Dots" size="activity-indicator-2xs"></ActivityIndicator>
<ActivityIndicator :type="Dots" size="activity-indicator-xs"></ActivityIndicator>
<ActivityIndicator :type="Dots" size="activity-indicator-sm"></ActivityIndicator>
<ActivityIndicator :type="Dots" size="activity-indicator-md"></ActivityIndicator>
<ActivityIndicator :type="Dots" size="activity-indicator-lg"></ActivityIndicator>
<ActivityIndicator :type="Dots" size="activity-indicator-xl"></ActivityIndicator>
<ActivityIndicator :type="Dots" size="activity-indicator-2xl"></ActivityIndicator>
<ActivityIndicator :type="Dots" size="activity-indicator-3xl"></ActivityIndicator>
<ActivityIndicator :type="Dots" size="activity-indicator-4xl"></ActivityIndicator>
<ActivityIndicator :type="Dots" size="activity-indicator-5xl"></ActivityIndicator>

Tailwind Sizes ​

Show Code
vue
<ActivityIndicator :type="Dots" size="activity-indicator-1"></ActivityIndicator>
<ActivityIndicator :type="Dots" size="activity-indicator-2"></ActivityIndicator>
<ActivityIndicator :type="Dots" size="activity-indicator-3"></ActivityIndicator>
<ActivityIndicator :type="Dots" size="activity-indicator-4"></ActivityIndicator>

Arbitrary Sizes ​

Show Code
vue
<ActivityIndicator :type="Dots" size="activity-indicator-[16px]"></ActivityIndicator>
<ActivityIndicator :type="Dots" size="activity-indicator-[2rem]"></ActivityIndicator>

Chase ​

Show Code
vue
<ActivityIndicator :type="Chase" size="activity-indicator-xs"></ActivityIndicator>
<ActivityIndicator :type="Chase" size="activity-indicator-sm"></ActivityIndicator>
<ActivityIndicator :type="Chase" size="activity-indicator-md"></ActivityIndicator>
<ActivityIndicator :type="Chase" size="activity-indicator-lg"></ActivityIndicator>
<ActivityIndicator :type="Chase" size="activity-indicator-xl"></ActivityIndicator>

Spinner ​

Show Code
vue
<ActivityIndicator :type="Spinner" size="activity-indicator-xs"></ActivityIndicator>
<ActivityIndicator :type="Spinner" size="activity-indicator-sm"></ActivityIndicator>
<ActivityIndicator :type="Spinner" size="activity-indicator-md"></ActivityIndicator>
<ActivityIndicator :type="Spinner" size="activity-indicator-lg"></ActivityIndicator>
<ActivityIndicator :type="Spinner" size="activity-indicator-xl"></ActivityIndicator>

Square ​

Show Code
vue
<ActivityIndicator :type="Square" size="activity-indicator-xs"></ActivityIndicator>
<ActivityIndicator :type="Square" size="activity-indicator-sm"></ActivityIndicator>
<ActivityIndicator :type="Square" size="activity-indicator-md"></ActivityIndicator>
<ActivityIndicator :type="Square" size="activity-indicator-lg"></ActivityIndicator>
<ActivityIndicator :type="Square" size="activity-indicator-xl"></ActivityIndicator>

Square Orbit ​

Show Code
vue
<ActivityIndicator :type="SquareOrbit" size="activity-indicator-xs"></ActivityIndicator>
<ActivityIndicator :type="SquareOrbit" size="activity-indicator-sm"></ActivityIndicator>
<ActivityIndicator :type="SquareOrbit" size="activity-indicator-md"></ActivityIndicator>
<ActivityIndicator :type="SquareOrbit" size="activity-indicator-lg"></ActivityIndicator>
<ActivityIndicator :type="SquareOrbit" size="activity-indicator-xl"></ActivityIndicator>

Square Fold ​

Show Code
vue
<ActivityIndicator :type="SquareFold" size="activity-indicator-xs"></ActivityIndicator>
<ActivityIndicator :type="SquareFold" size="activity-indicator-sm"></ActivityIndicator>
<ActivityIndicator :type="SquareFold" size="activity-indicator-md"></ActivityIndicator>
<ActivityIndicator :type="SquareFold" size="activity-indicator-lg"></ActivityIndicator>
<ActivityIndicator :type="SquareFold" size="activity-indicator-xl"></ActivityIndicator>

Circle Fade ​

Show Code
vue
<ActivityIndicator :type="CircleFade" size="activity-indicator-xs"></ActivityIndicator>
<ActivityIndicator :type="CircleFade" size="activity-indicator-sm"></ActivityIndicator>
<ActivityIndicator :type="CircleFade" size="activity-indicator-md"></ActivityIndicator>
<ActivityIndicator :type="CircleFade" size="activity-indicator-lg"></ActivityIndicator>
<ActivityIndicator :type="CircleFade" size="activity-indicator-xl"></ActivityIndicator>

Circle Orbit ​

Show Code
vue
<ActivityIndicator :type="CircleOrbit" size="activity-indicator-xs"></ActivityIndicator>
<ActivityIndicator :type="CircleOrbit" size="activity-indicator-sm"></ActivityIndicator>
<ActivityIndicator :type="CircleOrbit" size="activity-indicator-md"></ActivityIndicator>
<ActivityIndicator :type="CircleOrbit" size="activity-indicator-lg"></ActivityIndicator>
<ActivityIndicator :type="CircleOrbit" size="activity-indicator-xl"></ActivityIndicator>

Circle Trail ​

Show Code
vue
<ActivityIndicator :type="CircleTrail" size="activity-indicator-xs"></ActivityIndicator>
<ActivityIndicator :type="CircleTrail" size="activity-indicator-sm"></ActivityIndicator>
<ActivityIndicator :type="CircleTrail" size="activity-indicator-md"></ActivityIndicator>
<ActivityIndicator :type="CircleTrail" size="activity-indicator-lg"></ActivityIndicator>
<ActivityIndicator :type="CircleTrail" size="activity-indicator-xl"></ActivityIndicator>

Pulse ​

Show Code
vue
<ActivityIndicator :type="Pulse" size="activity-indicator-xs"></ActivityIndicator>
<ActivityIndicator :type="Pulse" size="activity-indicator-sm"></ActivityIndicator>
<ActivityIndicator :type="Pulse" size="activity-indicator-md"></ActivityIndicator>
<ActivityIndicator :type="Pulse" size="activity-indicator-lg"></ActivityIndicator>
<ActivityIndicator :type="Pulse" size="activity-indicator-xl"></ActivityIndicator>

Double Pulse ​

Show Code
vue
<ActivityIndicator :type="DoublePulse" size="activity-indicator-xs"></ActivityIndicator>
<ActivityIndicator :type="DoublePulse" size="activity-indicator-sm"></ActivityIndicator>
<ActivityIndicator :type="DoublePulse" size="activity-indicator-md"></ActivityIndicator>
<ActivityIndicator :type="DoublePulse" size="activity-indicator-lg"></ActivityIndicator>
<ActivityIndicator :type="DoublePulse" size="activity-indicator-xl"></ActivityIndicator>

Grid ​

Show Code
vue
<ActivityIndicator :type="Grid" size="activity-indicator-xs"></ActivityIndicator>
<ActivityIndicator :type="Grid" size="activity-indicator-sm"></ActivityIndicator>
<ActivityIndicator :type="Grid" size="activity-indicator-md"></ActivityIndicator>
<ActivityIndicator :type="Grid" size="activity-indicator-lg"></ActivityIndicator>
<ActivityIndicator :type="Grid" size="activity-indicator-xl"></ActivityIndicator>

Facebook ​

Show Code
vue
<ActivityIndicator :type="Facebook" size="activity-indicator-xs"></ActivityIndicator>
<ActivityIndicator :type="Facebook" size="activity-indicator-sm"></ActivityIndicator>
<ActivityIndicator :type="Facebook" size="activity-indicator-md"></ActivityIndicator>
<ActivityIndicator :type="Facebook" size="activity-indicator-lg"></ActivityIndicator>
<ActivityIndicator :type="Facebook" size="activity-indicator-xl"></ActivityIndicator>

Spotify ​

Show Code
vue
<ActivityIndicator :type="Spotify" size="activity-indicator-xs"></ActivityIndicator>
<ActivityIndicator :type="Spotify" size="activity-indicator-sm"></ActivityIndicator>
<ActivityIndicator :type="Spotify" size="activity-indicator-md"></ActivityIndicator>
<ActivityIndicator :type="Spotify" size="activity-indicator-lg"></ActivityIndicator>
<ActivityIndicator :type="Spotify" size="activity-indicator-xl"></ActivityIndicator>

Absolute Inside Parent ​

Show Code
html
<div class="relative h-[500px] bg-black/10">
  <ActivityIndicator
    :type="Dots"
    class="absolute inset-0 flex items-center justify-center"
  />
</div>