Progress

Компонент Progress используется для визуального отображения прогресса выполнения задачи. Он показывает пользователю, какая часть процесса уже завершена и сколько осталось до окончания операции.

В интерфейсах веб-приложений прогресс может обозначать:

загрузку файлов
установку программного обеспечения
выполнение вычислений
обработку данных
этапы выполнения задач
заполнение формы
состояние долгих асинхронных операций

В библиотеке Element Plus компонент el-progress предоставляет несколько вариантов отображения прогресса:

линейный (line)
круговой (circle)
панельный (dashboard)

Каждый вариант может настраиваться через параметры, позволяя адаптировать визуализацию под конкретный интерфейс.

Подключение компонента

В большинстве проектов компонент доступен сразу после установки библиотеки Element Plus.

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

<template>
  <el-progress :percentage="50" />
</template>

Параметр percentage определяет текущий процент выполнения операции.

Диапазон значения:

0 – 100

Если указано 50, индикатор показывает половину выполнения.

Линейный индикатор прогресса

По умолчанию используется линейный тип прогресса.

<template>
  <el-progress :percentage="30"></el-progress>
</template>

В результате отображается горизонтальная шкала, заполненная на 30%.

Основные особенности

Линейный прогресс:

легко читается
занимает мало места
подходит для загрузок и операций
может показывать текстовое значение

Отображение текста прогресса

По умолчанию компонент показывает процент выполнения.

Пример:

<template>
  <el-progress :percentage="70"></el-progress>
</template>

Отображение:

[███████████████████      ] 70%

Скрытие текста

Текст можно отключить.

<template>
  <el-progress :percentage="70" :show-text="false"></el-progress>
</template>

Теперь будет отображаться только графический индикатор.

Настройка ширины линии

Толщина прогресс-бара задаётся через свойство stroke-width.

<template>
  <el-progress :percentage="60" :stroke-width="20"></el-progress>
</template>

Значение указывается в пикселях.

Пример вариантов:

Значение	Результат
6	тонкий индикатор
12	стандартный
20+	крупный индикатор

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

Цвет прогресса

Цвет можно задать напрямую.

<template>
  <el-progress :percentage="80" color="#409EFF"></el-progress>
</template>

Поддерживаются:

HEX
RGB
HSL
CSS-переменные

Пример:

<el-progress :percentage="50" color="green"></el-progress>

Динамический цвет прогресса

Цвет можно изменять в зависимости от процента выполнения.

<template>
  <el-progress
    :percentage="percentage"
    :color="customColors"
  />
</template>

<script setup>
const percentage = 65

const customColors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
]
</script>

Логика работы:

Процент	Цвет
0–20	красный
21–40	оранжевый
41–60	зелёный
61–80	синий

Такая схема используется для отображения статуса выполнения.

Статусы прогресса

Компонент поддерживает несколько состояний.

Успешное завершение

<el-progress :percentage="100" status="success" />

Отображается:

зелёный цвет
иконка успешного завершения

Ошибка

<el-progress :percentage="50" status="exception" />

Используется для обозначения:

ошибок загрузки
отменённых операций
прерванных процессов

Индикатор окрашивается в красный цвет.

Предупреждение

<el-progress :percentage="80" status="warning" />

Применяется для ситуаций:

нестабильное состояние
близость к лимиту
потенциальные ошибки

Форматирование текста

Текст прогресса можно изменять с помощью функции format.

<template>
  <el-progress
    :percentage="40"
    :format="format"
  />
</template>

<script setup>
const format = (percentage) => {
  return percentage === 100 ? 'Complete' : percentage + '%'
}
</script>

Теперь вместо стандартного текста можно выводить:

Complete

или любой другой формат.

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

Тип circle отображает индикатор в виде круга.

<template>
  <el-progress
    type="circle"
    :percentage="60"
  />
</template>

Используется для:

статистики
виджетов
карточек метрик
панелей управления

Размер кругового индикатора

Размер регулируется параметром width.

<template>
  <el-progress
    type="circle"
    :percentage="75"
    :width="120"
  />
</template>

Значение задаётся в пикселях.

Примеры:

width	диаметр
100	компактный
150	средний
200+	крупный

Толщина круговой линии

Толщина круга также регулируется через stroke-width.

<el-progress
  type="circle"
  :percentage="70"
  :stroke-width="10"
/>

Это влияет на визуальную плотность кольца.

Панельный прогресс (Dashboard)

Тип dashboard представляет собой полукруговой индикатор, похожий на спидометр.

<template>
  <el-progress
    type="dashboard"
    :percentage="65"
  />
</template>

Применяется для:

аналитических панелей
мониторинга систем
отображения метрик

Угол отображения dashboard

Параметр dashboard использует свойство dashboard с настройкой percentage и отображает дугу вместо полного круга.

Полукруг создаёт эффект индикатора прибора.

Анимация прогресса

Компонент автоматически анимирует изменение значения percentage.

Пример динамического изменения:

<template>
  <el-progress :percentage="progress"></el-progress>
</template>

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

const progress = ref(0)

setInterval(() => {
  if (progress.value < 100) {
    progress.value += 10
  }
}, 1000)
</script>

Каждую секунду индикатор увеличивается.

Интерактивный прогресс загрузки

Часто используется при загрузке файлов.

Пример:

<template>
  <el-progress
    :percentage="uploadProgress"
    status="success"
  />
</template>

Логика:

загрузка файла → обновление процента → отображение прогресса

Значение обычно приходит из API загрузки.

Использование внутри карточек

Компонент удобно комбинируется с другими компонентами библиотеки Element Plus.

Пример карточки статистики:

<el-card>
  <h3>Загрузка сервера</h3>
  <el-progress
    type="circle"
    :percentage="72"
  />
</el-card>

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

Отображение нескольких прогрессов

В интерфейсе могут отображаться несколько операций.

<template>
  <el-progress :percentage="20" />
  <el-progress :percentage="45" status="warning" />
  <el-progress :percentage="80" status="success" />
</template>

Каждый индикатор отражает отдельный процесс.

Прогресс с пользовательским содержимым

Текст внутри круга можно полностью заменить.

<template>
  <el-progress type="circle" :percentage="50">
    <span>50 / 100</span>
  </el-progress>
</template>

Это позволяет отображать:

значения
иконки
дополнительные показатели

Применение в интерфейсах

Компонент Progress широко применяется в современных веб-приложениях:

Загрузка файлов

Upload → 0% → 25% → 70% → 100%

Установка обновлений

Download packages
Install dependencies
Configure system
Complete

Каждый этап может отображаться прогрессом.

Отслеживание задач

Пример:

Task completion

[███████████████     ] 65%

Аналитические панели

Круговые индикаторы показывают:

загрузку CPU
использование памяти
выполнение KPI
прогресс проектов

Оптимальные практики использования

Не использовать слишком много индикаторов

Большое количество прогресс-баров перегружает интерфейс.

Показывать реальный прогресс

Если операция неизвестна по времени, лучше использовать:

loading spinner
индикатор ожидания

Использовать цветовую семантику

Типичная схема:

Цвет	Значение
зелёный	успех
синий	выполнение
жёлтый	предупреждение
красный	ошибка

Обновлять прогресс плавно

Резкие скачки значений ухудшают восприятие интерфейса.

Лучше увеличивать значение постепенно.

Основные свойства компонента

Свойство	Назначение
percentage	процент выполнения
type	тип индикатора
stroke-width	толщина линии
width	размер круга
show-text	отображение текста
color	цвет индикатора
status	состояние прогресса
format	кастомный формат текста

Поддерживаемые типы

Тип	Описание
line	горизонтальный индикатор
circle	круговой индикатор
dashboard	полукруговой индикатор

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