Прогресс-индикаторы и загрузчики

Прогресс-индикаторы и загрузчики являются ключевыми элементами интерфейса для улучшения восприятия пользователем состояния приложения. В SvelteKit их реализация строится на комбинации реактивных переменных, встроенных компонентов UI-библиотек и управлении состоянием асинхронных операций.

Типы прогресс-индикаторов

1. Линейные (Linear Progress Bars) Линейные индикаторы визуализируют прогресс как горизонтальную шкалу. Обычно используются для загрузки файлов, обработки данных или отслеживания пошаговых процессов. В UI-библиотеках SvelteKit линейные прогресс-бары предоставляются компонентами с параметрами:

  • value — текущее значение прогресса (0–100).
  • indeterminate — режим неопределённого прогресса, когда точное значение неизвестно.
  • buffer — отображение дополнительного буфера для предварительной загрузки.

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

<script>
  import { LinearProgress } from 'sveltekit-ui-lib';
  let progress = 0;

  const simulateProgress = () => {
    const interval = setInterval(() => {
      progress += 5;
      if (progress >= 100) clearInterval(interval);
    }, 200);
  };
</script>

<LinearProgress {progress} />
<button on:click={simulateProgress}>Начать загрузку</button>

Ключевой момент: при изменении значения progress компонент автоматически перерисовывается, благодаря реактивной системе Svelte.

2. Круговые (Circular Progress Indicators) Круговые индикаторы чаще используются для кратковременных асинхронных действий, таких как запросы к API. Параметры компонентов включают:

  • size — диаметр индикатора.
  • value — процент заполнения круга.
  • indeterminate — бесконечная анимация вращения при неопределённом прогрессе.

Пример:

<script>
  import { CircularProgress } from 'sveltekit-ui-lib';
  let loading = true;

  setTimeout(() => loading = false, 3000);
</script>

{#if loading}
  <CircularProgress size={50} indeterminate />
{/if}

Состояния и стилизация

1. Цветовые схемы Прогресс-бары могут иметь разные цветовые темы: primary, secondary, success, warning, error. Это позволяет визуально различать тип процесса или статус операции.

<LinearProgress value={70} color="success" />

2. Анимации UI-библиотеки SvelteKit поддерживают плавную анимацию изменения значения value. Для линейного прогресса это может быть плавное заполнение полосы, для кругового — вращение сегментов. Анимации можно настраивать через CSS-переменные или свойства компонента (animationDuration, easing).

Управление прогрессом при асинхронных операциях

Для динамических задач, таких как загрузка данных с сервера, удобно связывать индикатор с состоянием промиса или fetch запроса.

Пример линейного прогресса для загрузки данных:

<script>
  import { LinearProgress } from 'sveltekit-ui-lib';
  let progress = 0;
  let data = [];

  async function loadData() {
    const response = await fetch('/api/data');
    const reader = response.body.getReader();
    const contentLength = +response.headers.get('Content-Length');
    let received = 0;

    while(true) {
      const { done, value } = await reader.read();
      if (done) break;
      received += value.length;
      progress = (received / contentLength) * 100;
    }

    data = await response.json();
  }
</script>

<LinearProgress {progress} />
<button on:click={loadData}>Загрузить данные</button>

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

Прогресс-индикаторы в контексте маршрутов SvelteKit

SvelteKit позволяет отслеживать состояние загрузки страниц через хук beforeNavigate или события маршрутизатора $page. Это позволяет показывать глобальный загрузчик при переходах между страницами:

<script>
  import { onMount } from 'svelte';
  import { LinearProgress } from 'sveltekit-ui-lib';
  import { navigating } from '$app/stores';
</script>

{#if $navigating}
  <LinearProgress indeterminate color="primary" />
{/if}

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

Комбинирование с другими компонентами UI

Прогресс-индикаторы часто интегрируются с другими элементами интерфейса:

  • Кнопки загрузки — индикатор появляется внутри кнопки при выполнении операции.
  • Модальные окна — круговой индикатор в центре модального окна при ожидании результата.
  • Карточки и списки — линейный прогресс для отдельных элементов списка, показывающий степень завершённости задачи.

Пример кнопки с индикатором:

<script>
  import { CircularProgress } from 'sveltekit-ui-lib';
  let loading = false;

  async function submitForm() {
    loading = true;
    await fetch('/api/submit', { method: 'POST' });
    loading = false;
  }
</script>

<button on:click={submitForm} disabled={loading}>
  {#if loading}
    <CircularProgress size={20} indeterminate />
  {/if}
  Отправить
</button>

Практические советы

  • Использовать indeterminate для неопределённого прогресса, когда точный процент неизвестен.
  • Реактивные переменные обеспечивают автоматическое обновление состояния индикатора.
  • Поддерживать согласованную цветовую схему для всех прогресс-баров в проекте.
  • Интегрировать глобальные прогресс-индикаторы с маршрутизатором SvelteKit для плавного UX.
  • Не перегружать интерфейс множеством индикаторов одновременно — предпочтительно показывать один контекстный элемент для конкретной операции.

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

Оглавление