ALoading

ALoading renders four bouncing dots — a lightweight, purely presentational loading indicator. It takes no props; just drop it inline wherever you need a small “working…” signal.

Import

import { Loading } from '@any-design/anyui/vue';
// React:  import { Loading } from '@any-design/anyui/react';
// Svelte: import { Loading } from '@any-design/anyui/svelte';

Basic usage

<template>
  <ALoading />
</template>

Examples

Inline inside a button

A common pattern: show the dots inside a button while an async action runs.

<template>
  <AButton type="primary" disabled>
    <span class="loading-button-content">
      <ALoading class="loading-button-dots" />
      Saving
    </span>
  </AButton>
</template>

<style scoped>
.loading-button-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.loading-button-dots {
  font-size: 4px;
}
</style>

Centered in a region

Wrap it in a flex container to center it over content that hasn’t loaded yet.

<template>
  <div class="loading-wrap">
    <ALoading />
  </div>
</template>

<style scoped>
.loading-wrap { display: flex; justify-content: center; padding: 40px; }
</style>

Props

This component has no configurable props.

Notes

No props — purely presentational. Use inside a button or inline where you need a tiny indicator.

ALoading

ALoading 渲染四个弹跳点 —— 轻量的纯展示型加载指示器。它没有 props，只需在需要小型 “加载中…” 提示的地方直接放置即可。

引入

import { Loading } from '@any-design/anyui/vue';
// React:  import { Loading } from '@any-design/anyui/react';
// Svelte: import { Loading } from '@any-design/anyui/svelte';

基础用法

<template>
  <ALoading />
</template>

示例

内联在按钮中

常见用法：异步操作执行时，在按钮内显示弹跳点。

<template>
  <AButton type="primary" disabled>
    <span class="loading-button-content">
      <ALoading class="loading-button-dots" />
      保存中
    </span>
  </AButton>
</template>

<style scoped>
.loading-button-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.loading-button-dots {
  font-size: 4px;
}
</style>

区域内居中

用 flex 容器包裹，使其在尚未加载的内容上方居中。

<template>
  <div class="loading-wrap">
    <ALoading />
  </div>
</template>

<style scoped>
.loading-wrap { display: flex; justify-content: center; padding: 40px; }
</style>

属性

该组件没有可配置属性。

说明

没有 props — 纯展示组件。可在按钮或行内需要小型指示器的地方使用。

<!-- Demo 1 -->
<template>
  <ALoading />
</template>