Material Design Lite. Progress Bar and Spinners

Для долгих операций используют индикаторы прогресса Progress Bar и Spinner.

Progress Bar

Для индикаторов прогресса используются два класса

• mdl-js-progress - Задаёт компонент. Обязательно.
• mdl-progress--indeterminate - Анимация. По желанию.

Простейший вариант. Значение задаётся в скрипте.

<div id="p1" class="mdl-progress mdl-js-progress"></div>
<script>
  document.querySelector('#p1').addEventListener('mdl-componentupgraded', function() {
    this.MaterialProgress.setProgress(33);
  });
</script>

Ширину можно указать в стилях.

<div id="prog2" style="width:250px" class="mdl-progress mdl-js-progress"></div>
<script>
  document.querySelector('#prog2').addEventListener('mdl-componentupgraded', function() {
    this.MaterialProgress.setProgress(80);
  });
 </script>

Для индикатора с анимацией достаточно указать второй класс.

<!-- MDL Progress Bar with Indeterminate Progress -->
<div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>

Также можно создать эффект буфферизации.

<div id="p3" class="mdl-progress mdl-js-progress"></div>
<script>
  document.querySelector('#p3').addEventListener('mdl-componentupgraded', function() {
    this.MaterialProgress.setProgress(33);
    this.MaterialProgress.setBuffer(87);
  });
</script>

Spinner

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

Содержит четыре класса: два обязательных и два необязательных.

Можно использовать не только в div, но и в p, span.

• mdl-spinner - Обязательный. Контейнер для индикатора
• mdl-js-spinner - Обязательный. Задаёт поведение.
• is-active - Необязательный. Делает индикатор видимым и анимированным.
• mdl-spinner--single-color - Необязательный. Использует единственный цвет (primary) вместо набора цветов.

<!-- MDL Spinner Component -->
<div class="mdl-spinner mdl-js-spinner is-active"></div>
<!-- MDL Spinner Component with Single Color -->
<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>

Если компонент нужно сделать невидимым, то через сценарий нужно программно убрать класс is-active.

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

Реклама