Skip to content

加载 Spin

正在加载...

基础使用

用 Spin 组件包裹要加载的内容。loading 属性设置加载状态。

Good programmers are always learning. They read books, attend conferences, and talk to others. They experiment with new languages and tools, constantly trying to write better code. Studying classic problems teaches how to break them down and balance trade-offs—time versus space, simplicity versus efficiency. Reading others' code reveals structure, naming, and commenting habits. Learning never stops; every line is a chance to improve.
<template>
	<px-spin loading>
		Good programmers are always learning. They read books, attend conferences, and talk to
		others. They experiment with new languages and tools, constantly trying to write better
		code. Studying classic problems teaches how to break them down and balance trade-offs—time
		versus space, simplicity versus efficiency. Reading others' code reveals structure, naming,
		and commenting habits. Learning never stops; every line is a chance to improve.
	</px-spin>
</template>

单独使用

单独使用时仅展示加载图标。

<template>
	<px-spin> </px-spin>
</template>

图标尺寸

图标有不同尺寸。

<template>
	<px-space>
		<px-spin :size="12"></px-spin>
		<px-spin size="small"></px-spin>
		<px-spin></px-spin>
		<px-spin size="large"></px-spin>
		<px-spin :size="44"></px-spin>
	</px-space>
</template>

换个图标

icon 插槽修改图标。

<template>
	<px-spin>
		<template #icon>
			<px-icon spin><IconSpinner></IconSpinner></px-icon>
		</template>
	</px-spin>
</template>
<script setup lang="ts">
import { IconSpinner } from '@pixelium/web-vue/icon-hn/es'
</script>

添加描述

使用 description 插槽,你也可以添加加载中的描述。

The most important part of writing a program is not deciding what data structures to use or what algorithms to implement. It is understanding the problem. Once you really understand the problem, the right data structures and algorithms often become obvious. The hard part is getting to that point—seeing past the surface and figuring out what the program really needs to do.
Coming Soooooooooooon...
<template>
	<px-spin loading>
		The most important part of writing a program is not deciding what data structures to use or
		what algorithms to implement. It is understanding the problem. Once you really understand
		the problem, the right data structures and algorithms often become obvious. The hard part is
		getting to that point—seeing past the surface and figuring out what the program really needs
		to do.
		<template #description> Coming Soooooooooooon... </template>
	</px-spin>
</template>

API

SpinProps

属性类型可选默认值描述版本
loadingboolean加载状态,单独使用 Spin 时默认 true,包裹内容时默认 false0.0.2
size'medium' | 'large' | 'small' | number'medium'图标尺寸。0.0.2
maskColorstring遮罩层 Mask 组件颜色。0.0.2
maskStepnumber1遮罩层 Mask 组件网格间隔。0.0.2
maskLineWidthnumber2遮罩层 Mask 组件线条尺寸。0.0.2
maskGridbooleantrue遮罩层 Mask 组件是否为网格背景。0.0.2
zIndexnumber20包裹内容时,加载状态呈现的覆盖层的 z-index0.0.2

SpinSlots

插槽参数描述版本
defaultSpin 包裹的内容。0.0.2
iconSpin 的图标。0.0.2
descriptionSpin 加载时的描述。0.0.2