Оверлей загрузки показывает происходящий в нем процесс.
Когда нужно наглядно показать, что блок загружается или идет какой-то процесс. Перед добавлением оверлея с загрузчиком уточните время загрузки.
Оверлей со спиннером — это временное состояние блока. Появляется в ответ на действие пользователя (например, нажатие терминальной кнопки в форме) либо на процесс системы. После окончания процесса оверлей и спиннер исчезают.
Элементы за оверлеем не должны быть доступны для фокуса, выделения и нажатия.
Непрозрачный оверлей, спиннер, основной текст. Текст по умолчанию — «Загрузка», рекомендуется подбирать текст индивидуально. Не используйте текст, состоящий из одного слов «Загрузка», с увеличенным спиннером.
Система запрещает фокусироваться на элементах формы, поверх которых накладывается оверлей.
Подложка имеет цвет background и прозрачность 90%.
Оверлей занимает всю ширину и высоту контейнера, поверх которого он показывается. Отступы от краев оверлея — 10% от его ширины. Максимальная ширина текста и подписи под спиннером — 480px.
Возможно выравнивание по центру с оптической компенсацией: отступ от верхнего края должен быть меньше, чем от нижнего. По умолчанию высота компенсации равна 40% высоты блока, состоящего из индикатора загрузки и подписей.
Возможно выравнивание с фиксированным отступом сверху (по умолчанию 72px).
Если надо показать процесс загрузки на всей странице, используется увеличенный спиннер. Не используйте текст, состоящий из одного слова «Загрузка», с увеличенным спиннером.
Размер компонента устанавливается при помощи атрибута size.
Если оверлей загрузки размещается внутри карточки или модального окна, используйте атрибут card. Он применяет полупрозрачный фон, который органично сочетается с поверхностью позади него.