Loading Spin

🌏 Translated with the assistance of DeepSeek and ChatGPT

Loading...

Basic Usage

Wrap the content to be loaded with the Spin component. The loading property sets the loading state.

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>

Standalone Usage

When used alone, only the loading icon is displayed.

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

Icon Size

Icons come in different sizes.

<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>

Change Icon

Use the icon slot to change the 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>

Add Description

Use the description slot to add a loading 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

Attribute	Type	Optional	Default	Description	Version
loading	boolean	True		Loading state. Defaults to true when Spin is used alone, and false when wrapping content.	0.0.2
size	'medium' | 'large' | 'small' | number	True	'medium'	Icon size.	0.0.2
maskColor	string	True		Mask component color.	0.0.2
maskStep	number	True	1	Grid spacing of the Mask component.	0.0.2
maskLineWidth	number	True	2	Line width of the Mask component.	0.0.2
maskGrid	boolean	True	true	Whether the Mask component has a grid background.	0.0.2
zIndex	number	True	20	z-index of the overlay when wrapping content.	0.0.2

SpinSlots

Slot	Parameter	Description	Version
default		Content wrapped by Spin.	0.0.2
icon		Icon for Spin.	0.0.2
description		Description during Spin loading.	0.0.2