Loading

Show animation while loading data.

?

Name	Category	Description	Type	Default
LoadingIndicatorvariant	? Style	Animation variant	'spinner' | 'dots' | 'bars' | 'ring'	'spinner'
LoadingIndicatorsize	? Style	Indicator size	'xs' | 'sm' | 'md' | 'lg'	'md'
LoadingIndicatortype	? Style	Color theme	'primary' | 'success' | 'info' | 'warning' | 'danger'	'primary'
LoadingIndicatorcolor	? Style	Custom color (hex)	string	—
background	? Style	Mask background color	string	—
v-loading	? Behavior	Whether to show loading	boolean	—
fullscreen	? Behavior	Whether fullscreen	boolean	false
lock	? Behavior	Lock screen scroll	boolean	false
target	? Content	Target element to cover	HTMLElement | string	document.body
text	? Content	Loading text	string	—
spinner	? Content	Custom loading icon	string | boolean	—
close	? Method	Close Loading	() => void	—

Spinner Variants

PxLoadingIndicator is a standalone loading indicator with 4 pixel-art animation variants.

<template>
  <div style="display: flex; gap: 24px; align-items: center">
    <div v-for="v in variants" :key="v" style="text-align: center">
      <px-loading-indicator :variant="v" size="lg" />
      <p style="margin-top: 8px; font-size: 12px">{{ v }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
const variants = ['spinner', 'dots', 'bars', 'ring'] as const;
</script>

Sizes

Use size to control the indicator dimensions: xs (16px), sm (20px), md (24px), lg (32px).

<template>
  <div style="display: flex; gap: 24px; align-items: center">
    <div v-for="s in sizes" :key="s" style="text-align: center">
      <px-loading-indicator :size="s" />
      <p style="margin-top: 8px; font-size: 12px">{{ s }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
const sizes = ['xs', 'sm', 'md', 'lg'] as const;
</script>

Types / Colors

Use type for preset theme colors or color for custom hex colors.

<template>
  <div style="display: flex; gap: 24px; align-items: center">
    <div v-for="t in types" :key="t" style="text-align: center">
      <px-loading-indicator :type="t" size="lg" />
      <p style="margin-top: 8px; font-size: 12px">{{ t }}</p>
    </div>
    <div style="text-align: center">
      <px-loading-indicator color="#8B5CF6" size="lg" />
      <p style="margin-top: 8px; font-size: 12px">custom</p>
    </div>
  </div>
</template>

<script setup lang="ts">
const types = ['primary', 'success', 'info', 'warning', 'danger'] as const;
</script>

Area Loading

Display when loading data in a container. Uses PxLoadingIndicator internally.

<template>
  <div class="demo-loading">
    <div v-loading="loading" class="loading-area">
      <p>Content area</p>
    </div>
    <px-button @click="toggleLoading">Toggle Loading</px-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const loading = ref(true);

const toggleLoading = () => {
  loading.value = !loading.value;
};
</script>

<style scoped>
.demo-loading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.loading-area {
  width: 100%;
  height: 150px;
  border: 2px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

Customization

You can customize loading text, background color, etc.

<template>
  <div class="demo-loading">
    <div
      v-loading="loading"
      px-loading-text="Loading..."
      px-loading-background="rgba(0, 0, 0, 0.7)"
      class="loading-area"
    >
      <p>Custom loading text and background</p>
    </div>
    <px-button @click="toggleLoading">Toggle Loading</px-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const loading = ref(true);

const toggleLoading = () => {
  loading.value = !loading.value;
};
</script>

<style scoped>
.demo-loading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.loading-area {
  width: 100%;
  height: 150px;
  border: 2px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

Fullscreen Loading

Use fullscreen loading.

<template>
  <px-button v-loading.fullscreen="fullscreenLoading" @click="openFullscreenLoading">
    Fullscreen Loading (3s)
  </px-button>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const fullscreenLoading = ref(false);

const openFullscreenLoading = () => {
  fullscreenLoading.value = true;
  setTimeout(() => {
    fullscreenLoading.value = false;
  }, 3000);
};
</script>

Service

Loading can also be invoked as a service.

<template>
  <px-button @click="openLoading">Service Loading (3s)</px-button>
</template>

<script setup lang="ts">
import { PxLoadingService } from 'sakana-element';

const openLoading = () => {
  const loading = PxLoadingService({
    lock: true,
    text: 'Loading...',
    fullscreen: true,
    background: 'rgba(0, 0, 0, 0.7)',
  });
  setTimeout(() => {
    loading.close();
  }, 3000);
};
</script>