Loading

⚡WASM Powered

TechUI provides a high-performance Loading system. Unlike traditional GIF or CSS animations, TechUI's loading icons are derived from SVG sequences built into WebAssembly (WASM) modules.

The system uses CSS Mask technology for rendering, meaning all loading icons automatically adapt to the current theme color without requiring extra image resources.

Core Components

The loading system consists of two core components:

1. TuiLoadingFull: Full-screen/global loading mask, typically used for page transitions or application initialization. Supports both component-based and functional invocation methods.
2. TuiLoadingArea: Local/container loading mask, typically used for data refreshing in specific areas like tables or cards.

Global Configuration

All loading styles are managed by default via the global configuration $spinnerConfig. You can specify the default loading animation type and size during application initialization.

Configuration Structure

// In Global Config or TuiProvider
const spinnerConfig = {
  // Full-screen loading config
  full: { 
    name: "blocksA", // Animation name (see list below)
    size: 100        // Size (px)
  },
  
  // Local loading config
  area: { 
    name: "pointA",  // Animation name
    size: 40         // Size (px)
  }
};

Dynamic Modification

At runtime, you can update loading animation styles in real-time by modifying the configuration and calling the initSpinner method.

import { inject } from 'vue';

const { $tState, initSpinner } = inject('$global');

const changeSpinnerStyle = () => {
  $tState.spinnerConfig.full.name = "ringA";
  initSpinner($tState.spinnerConfig);
};

LoadingFull

Global Method Invocation (Recommended)

In business logic (such as API request interceptors, route guards), it is recommended to use the global method $tLoading.

import { inject } from 'vue';

const { $tLoading, $tLoadingClose } = inject('$global');

const handleFetch = async () => {
  // Start loading
  $tLoading({
    desc: "Synchronizing data...", // Loading text
    appendTo: "#app",              // Specify mount node
    visible: true
  });

  try {
    await api.getData();
  } finally {
    // Close loading
    $tLoadingClose();
  }
};

Component Invocation

In Vue templates, you can also use the component form directly.

<template>
  <TuiLoadingFull 
    :visible="isLoading" 
    desc="System initializing" 
    :zIndex="9999"
  />
</template>

LoadingArea

Area loading primarily exists in component form, used to overlay parent containers.

Note: When using <TuiLoadingArea>, the CSS position property of its parent container (Parent Element) must be set to relative, absolute, or fixed; otherwise, the mask will not cover the area correctly.

<template>
  <div class="data-card" style="position: relative; min-height: 200px;">
    <DataList />

    <TuiLoadingArea 
      :visible="isCardLoading" 
      :mask="true" 
      :size="50"
    />
  </div>
</template>

Animation Graphic Library

The system includes 19 built-in SVG animation graphics. You can use the following Key values in the configured name field:

Bars & Blocks

• barsA, barsB, barsC
• blocksA, blocksB, blocksC

Dots & Clock

• pointA, pointB, pointC
• clock (Clock countdown)

Pulse & Rings

• pulseDotA, pulseDotB, pulseDotC
• pulseRingA, pulseRingB, pulseRingC
• ringA, ringB, ringC

API Reference

TuiLoadingFull (Full-Screen Loading)

Supports component properties or the $tLoading(options) parameter object.

Property Name	Type	Default	Description
visible	Boolean	true	Controls visibility.
desc	String	""	Description text below the loading icon.
appendTo	String	null	Specifies the target DOM selector for mounting (e.g., #app, body). Only valid in dynamic render mode.
dynamicRender	Boolean	false	Whether to enable dynamic render mode (usually handled internally by function calls).
size	Number	-	Overrides the icon size in global config (px).
color	String	-	Overrides the default color.
zIndex	Number	-	Custom z-index.
update	Boolean	-	Set to true to force update/redraw of the animation component.

Note: tuiService, tMask, tMaskClose, and destroy are internal dependency injection parameters and usually do not need to be passed manually.

TuiLoadingArea (Local Loading)

Property Name	Type	Default	Description
visible	Boolean	true	Controls visibility.
mask	Boolean	-	Whether to show the background blur/dim mask layer.
size	Number	-	Overrides the icon size in global config (px).
color	String	-	Overrides the default color.
zIndex	Number	-	Custom z-index.
update	Boolean	-	Set to true to force update/redraw of the animation component.

Global Methods

• $tLoading(options): Creates and displays full-screen loading. The options parameter is the same as TuiLoadingFull properties.
• $tLoadingClose(): Closes the currently active full-screen loading instance.

Credits

n3r4zzurr0

Github

The core SVG dynamic graphic assets in this component originate from the open-source project svg-spinners!

Hereby, we extend our sincere gratitude and respect to the author n3r4zzurr0!