Типы загрузчиков

В Naive UI для JavaScript загрузчики (loaders) используются для индикации состояния загрузки данных или выполнения длительных операций. Они позволяют визуально сигнализировать пользователю, что процесс в работе, и обеспечивают более плавный UX. Библиотека предоставляет несколько видов загрузчиков с различной функциональностью и визуальным оформлением.

1. Классический индикатор загрузки (n-loading-bar)

n-loading-bar используется для отображения прогресса загрузки в виде полосы в верхней части страницы.

Основные свойства:

  • show – логическое значение, показывающее или скрывающее индикатор.
  • percent – текущий процент загрузки (от 0 до 100).
  • status – состояние индикатора, может быть success, error или active.
  • stroke-height – высота полосы в пикселях.
  • duration – время анимации увеличения процента в миллисекундах.

Пример использования:

import { createApp } from 'vue';
import { NLoadingBarProvider, useLoadingBar } from 'naive-ui';

const app = createApp(App);

app.use(NLoadingBarProvider);

export default {
  setup() {
    const loadingBar = useLoadingBar();

    function startLoading() {
      loadingBar.start();
    }

    function finishLoading() {
      loadingBar.finish();
    }

    return { startLoading, finishLoading };
  }
};

Особенность n-loading-bar в том, что он может управляться программно и позволяет задавать сложные последовательности анимации, например, постепенное увеличение процента загрузки при асинхронных запросах.

2. Спиннеры (n-spin)

n-spin представляет собой круговой индикатор загрузки. Он применяется для локальных компонентов или контейнеров, где необходимо показать, что конкретный элемент загружается.

Ключевые свойства:

  • show – отображение спиннера.
  • size – размер индикатора (small, medium, large).
  • tip – текстовая подсказка, отображаемая под спиннером.
  • stroke – толщина линии спиннера.
  • color – цвет индикатора.

Пример использования:

<template>
  <n-spin :show="loading" size="large" tip="Загрузка данных...">
    <div>Контент будет отображен после загрузки</div>
  </n-spin>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const loading = ref(true);

    setTimeout(() => {
      loading.value = false;
    }, 3000);

    return { loading };
  }
};
</script>

n-spin можно оборачивать вокруг любого блока, и он автоматически центрирует индикатор по контейнеру, обеспечивая аккуратный визуальный эффект.

3. Прогресс-бар (n-progress)

n-progress отличается от n-loading-bar тем, что используется для конкретных процессов, а не глобально. Применяется внутри компонентов для визуализации выполнения задач, например, загрузки файла.

Основные свойства:

  • percentage – процент выполнения процесса.
  • show-text – отображение числового значения процента.
  • stroke-color – цвет прогресс-бара.
  • status – success, error, active, default.
  • animation – включение/выключение анимации изменения прогресса.

Пример:

<n-progress :percentage="uploadPercent" show-text stroke-color="#409EFF" />

Прогресс-бар может быть линейным или круговым (circular), что расширяет возможности визуального отображения для сложных интерфейсов.

4. Ленивая загрузка контента (n-skeleton)

n-skeleton используется для имитации структуры контента до его полной загрузки. Это особенно полезно для списков, карточек или таблиц.

Свойства:

  • loading – состояние загрузки, определяет, показывать скелетон или реальный контент.
  • rows – количество строк-заполнителей для текста.
  • animated – включение анимации “свечения”.
  • width – ширина скелетона для каждой строки.

Пример:

<n-skeleton :loading="loading" animated>
  <template #template>
    <div style="height: 100px; background-color: #f0f0f0;"></div>
  </template>
  <div>Загруженный контент</div>
</n-skeleton>

Преимущество скелетона в том, что он создаёт впечатление мгновенной загрузки интерфейса, даже если данные приходят с задержкой.

5. Интеграция нескольких загрузчиков

В крупных приложениях часто используется комбинация спиннера, прогресс-бара и скелетона. Например:

  • Скелетон для предварительного отображения структуры карточек.
  • Спиннер для отображения состояния глобальной загрузки данных.
  • Прогресс-бар для контроля выполнения конкретной задачи, например, загрузки файла.

Такой подход обеспечивает высокую отзывчивость интерфейса и улучшает UX.

Рекомендации по использованию

  • Для глобальных операций лучше использовать n-loading-bar.
  • Для локальных элементов и контейнеров — n-spin.
  • Для отслеживания прогресса конкретных действий — n-progress.
  • Для списков и контента с задержкой — n-skeleton.
  • Не перегружать интерфейс одновременно несколькими анимированными индикаторами в одной зоне.

Эффективное использование всех типов загрузчиков Naive UI позволяет создавать динамичные и визуально понятные интерфейсы, которые реагируют на действия пользователя без задержек.

Оглавление