Progress индикаторы

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

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

  1. Линейные (Linear / Bar)

    • Представляют собой горизонтальные полосы, заполняющиеся по мере прогресса.
    • Могут отображать как конкретный процент выполнения, так и неопределённое ожидание (индикация загрузки без точного значения).

  2. Круговые (Circular / Spinner)

    • Используются для обозначения фоновых процессов.
    • Часто применяются в ситуациях, когда невозможно заранее определить длительность операции.

  3. Многоступенчатые / Step Progress

    • Применяются для визуализации пошаговых процессов (например, многократные формы или установки).
    • Каждая ступень может иметь состояние: завершена, текущая или ожидаемая.

Линейный прогресс в SvelteKit

Простейший способ реализации линейного прогресс-бара через компонент SvelteKit UI выглядит следующим образом:

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

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

<LinearProgress bind:value={progress} />
<button on:click={simulateProgress}>Запустить прогресс</button>

Ключевые моменты:

  • bind:value связывает внутреннее состояние компонента с переменной progress.
  • Можно управлять цветом и размером полосы через свойства библиотеки.
  • Для анимации прогресса часто используют setInterval или асинхронные функции.

Круговой прогресс

Круговой индикатор удобен для отображения неопределённого прогресса:

<script>
  import { CircularProgress } from 'svelte-material-ui';
  let determinate = false;
  let value = 0;

  const simulateCircular = () => {
    determinate = true;
    const interval = setInterval(() => {
      value += 10;
      if (value >= 100) clearInterval(interval);
    }, 300);
  };
</script>

<CircularProgress {determinate} bind:value={value} />
<button on:click={simulateCircular}>Старт кругового прогресса</button>

Особенности:

  • determinate — режим с известным процентом выполнения.
  • В индeterminate-режиме индикатор крутится бесконечно, сигнализируя о процессе без точного завершения.
  • Цвета, размеры и анимация настраиваются через CSS-переменные или свойства компонента.

Адаптивность и стилизация

Прогресс-бары в SvelteKit UI поддерживают кастомизацию:

  • Цветовые темы: использование предопределённых тем UI-библиотеки или собственных классов.
  • Высота и ширина: height, thickness для линейных и радиус для круговых.
  • Анимация: плавное заполнение через CSS transition или встроенные анимации компонента.
  • Интеграция с TailwindCSS: многие UI-библиотеки позволяют применять Tailwind-классы для управления внешним видом.
<LinearProgress class="h-2 rounded-full bg-gray-200" style="--progress-color: #3b82f6;" bind:value={progress} />

Прогресс на основе состояния приложения

Часто прогресс связан с состоянием загрузки данных или API-запросов. Использование Svelte stores позволяет синхронизировать индикаторы с глобальными состояниями:

<script>
  import { LinearProgress } from 'svelte-material-ui';
  import { writable } from 'svelte/store';

  export const loadProgress = writable(0);

  async function fetchData() {
    loadProgress.set(0);
    for (let i = 1; i <= 10; i++) {
      await new Promise(r => setTimeout(r, 200));
      loadProgress.update(n => n + 10);
    }
  }
</script>

<LinearProgress bind:value={$loadProgress} />
<button on:click={fetchData}>Загрузить данные</button>

Преимущества такого подхода:

  • Прогресс отображается в любом компоненте, подписанном на store.
  • Обеспечивается реактивность без ручного управления DOM.
  • Удобно для комплексных приложений с множественными асинхронными операциями.

Многоступенчатый прогресс

Для визуализации многошаговых процессов используются Step Progress:

<script>
  import Stepper from 'flowbite-svelte/Stepper';
  let step = 1;

  const nextStep = () => step = Math.min(step + 1, 4);
  const prevStep = () => step = Math.max(step - 1, 1);
</script>

<Stepper currentStep={step} steps={[
  { label: 'Выбор продукта' },
  { label: 'Оплата' },
  { label: 'Доставка' },
  { label: 'Завершение' }
]} />

<button on:click={prevStep}>Назад</button>
<button on:click={nextStep}>Вперед</button>

Особенности:

  • Компонент автоматически отображает состояние каждого шага.
  • Можно настраивать иконки, цвета, анимацию переходов.
  • Подходит для форм, установок и пошаговых интерфейсов.

Оптимизация UX с прогресс-индикаторами

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

Интеграция с событиями и анимациями

SvelteKit UI позволяет связывать прогресс с событиями, например, завершением HTTP-запросов или WebSocket-событий:

<script>
  import { LinearProgress } from 'svelte-material-ui';
  import { onMount } from 'svelte';

  let progress = 0;

  onMount(async () => {
    const data = await fetch('/api/data');
    const total = 100;
    const reader = data.body.getReader();
    while(true) {
      const { done, value } = await reader.read();
      if (done) break;
      progress += (value.length / total) * 100;
    }
  });
</script>

<LinearProgress bind:value={progress} />

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

Оглавление