MDUIDocs
Копировать ссылку llms.txtКопировать ссылку llms-full.txtПросмотреть страницу в MarkdownОбсудить страницу с ChatGPTОбсудить полную документацию проекта с ChatGPT
Предустановленный цвет
Пользовательский цвет
Извлечь цвет из обоев
Пожалуйста, выберите обои
Начало работы
Разработка с помощью ИИ
Стили
Интеграция с фреймворками
Компоненты
Avatar АватарBadge БейджBottomAppBar Нижняя панель приложенияButton КнопкаButtonIcon Кнопка с иконкойCard КарточкаCheckbox ЧекбоксChip ЧипCircularProgress Круговой индикатор прогрессаCollapse Раскрывающийся блокDialog Диалоговое окноDivider РазделительDropdown Выпадающее менюFab Плавающая кнопка действияIcon ИконкаLayout LayoutLinearProgress Линейный индикатор прогрессаList СписокMenu МенюNavigationBar Панель навигацииNavigationDrawer Выдвижная панель навигацииNavigationRail Боковая панель навигацииRadio РадиокнопкаRangeSlider Слайдер диапазонаSelect Выпадающий списокSegmentedButton Сегментированная кнопкаSlider СлайдерSnackbar СнэкбарSwitch ПереключательTabs ВкладкиTextField Текстовое полеTooltip ТултипTopAppBar Верхняя панель приложения
Функции
Библиотеки

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

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

Использование

При необходимости импортируйте компонент:

import 'mdui/components/linear-progress.js';

При необходимости импортируйте типы TypeScript:

import type { LinearProgress } from 'mdui/components/linear-progress.js';

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

<mdui-linear-progress></mdui-linear-progress>

Примеры

Установка прогресса

По умолчанию линейный индикатор отображает состояние выполнения задачи с неопределённой длительностью. Вы можете задать текущий прогресс через атрибут value. Максимальное значение прогресса по умолчанию — 1.

Максимальное значение прогресса можно задать через атрибут max.

API

Свойства

АтрибутСвойствоReflectТипПо умолчанию
maxmaxnumber1

Максимальное значение индикатора прогресса. По умолчанию 1.

valuevaluenumber-

Текущее значение индикатора прогресса. Если не указано, индикатор находится в неопределённом состоянии.

CSS Parts

Название
indicator

Индикатор выполнения.

Пользовательские CSS-свойства

Название
--shape-corner

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

На этой странице