Индикаторы прогресса
Индикаторы прогресса включают линейные и круговые индикаторы.
Использование
Линейный индикатор прогресса написан на чистом CSS, и для его работы достаточно добавить HTML-код.
Круговой индикатор прогресса инициализируется автоматически после загрузки страницы. Для динамически созданных индикаторов необходимо вызвать mdui.mutation().
Цвет
Линейный индикатор использует основной цвет.
Круговой индикатор может использовать основной цвет или быть многоцветным.
Линейный индикатор прогресса
Неопределённый прогресс
Этот индикатор используется, когда точное значение прогресса неизвестно.
<div class="mdui-progress">
<div class="mdui-progress-indeterminate"></div>
</div>Определённый прогресс
Этот индикатор используется, когда известно точное значение прогресса.
Обновите значение свойства width элемента <div class="mdui-progress-determinate"></div> для изменения прогресса.
<div class="mdui-progress">
<div class="mdui-progress-determinate" style="width: 30%;"></div>
</div>Круговой индикатор прогресса
Просто добавьте элемент <div class="mdui-spinner"></div> для создания кругового индикатора. Добавьте класс .mdui-spinner-colorful для создания многоцветного индикатора.
Вы можете изменить размер кругового индикатора, изменив значения width и height класса .mdui-spinner, при этом width и height должны быть равны.
Динамически созданный круговой индикатор
Если ваш круговой индикатор создается динамически, необходимо вызвать mdui.mutation() для инициализации.
Если вам нужно изменить существующий круговой индикатор, вызовите метод mdui.updateSpinners(). Он принимает CSS-селектор (содержащий .mdui-spinner), DOM-элемент или массив DOM-элементов для повторной инициализации только указанных индикаторов. Без аргументов будут повторно инициализированы все индикаторы на странице.
Список CSS-классов
| Имя класса | Описание |
|---|---|
.mdui-progress | Определяет линейный индикатор прогресса. |
.mdui-progress-indeterminate | Линейный индикатор с неопределённым прогрессом. |
.mdui-progress-determinate | Линейный индикатор с определённым прогрессом. |
.mdui-spinner | Определяет круговой индикатор прогресса. |
.mdui-spinner-colorful | Многоцветный круговой индикатор прогресса. |