加载中 Loading
加载中状态，在页面局部处于等待异步数据或正在渲染过程时使用，可缓解用户焦虑。
基本使用
当 loading 为 false 时，不显示 loading 状态；当 loading 为 true 时，显示 loading 效果；如果不设置 tip 描述文案时，则只有 loading 效果水平垂直居中；如果设置了 tip 描述文案，则 loading 效果和 tip 描述文案一起水平垂直居中。
Loading state:
Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
const loading = ref(true)
</script>
<template>
<n-loading :loading="loading">
<p class="loading-content">
当 loading 为 false 时，不显示 loading 状态；当 loading 为 true 时，显示 loading 效果；如果不设置 tip 描述文案时，则只有 loading 效果水平垂直居中；如果设置了 tip 描述文案，则 loading 效果和 tip
描述文案一起水平垂直居中。
</p>
</n-loading>
<br />
<h4>
Loading state:
<n-switch v-model:checked="loading" />
</h4>
</template>
<style scoped>
.loading-content {
display: inline-block;
border: 1px solid #91d5ff;
background-color: #e6f7ff;
padding: 16px;
}
</style>不同大小
Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
const loading = ref(true)
</script>
<template>
<div class="n-box-flex">
<n-loading :loading="loading" size="small" />
<n-loading :loading="loading" />
<n-loading :loading="loading" size="large" />
<n-loading :loading="loading" size="small" indicator="static-circle" />
<n-loading :loading="loading" indicator="static-circle" />
<n-loading :loading="loading" size="large" indicator="static-circle" />
<n-loading :loading="loading" size="small" indicator="dynamic-circle" />
<n-loading :loading="loading" indicator="dynamic-circle" />
<n-loading :loading="loading" size="large" indicator="dynamic-circle" />
</div>
</template>静态动态
静态加载...
动态加载...
Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
const loading = ref(true)
</script>
<template>
<div class="n-box-flex">
<n-loading tip="静态加载..." :loading="loading" indicator="static-circle" />
<n-loading tip="动态加载..." :loading="loading" indicator="dynamic-circle" />
</div>
</template>自定义颜色 & 自定义文本
加载中...
Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
const loading = ref(true)
</script>
<template>
<div class="n-box-flex">
<n-loading color="#fadb14" :loading="loading" />
<n-loading color="#fadb14" :loading="loading" indicator="static-circle" />
<n-loading color="#fadb14" :loading="loading" indicator="dynamic-circle" />
</div>
</template>vue
<script setup lang="ts">
import { ref } from 'vue'
const loading = ref(true)
</script>
<template>
<div class="n-box-flex">
<n-loading tip="加载中..." :loading="loading" />
</div>
</template>API
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| spinning | 是否为加载中状态 | boolean | true |
| size | 组件大小 | 'small' | 'default' |
| tip | 描述文案 | string | '' |
| indicator | 加载指示符 | 'dot' | 'static-circle' |
| color | 主题颜色 | string | '#9708cc' |