Лоадер (индикатор загрузки) для интерфейсов

Привет!

Хочу поделиться с вами полезным примером - лоадер для интерфейсов.

Когда стоит задуматься о его использовании?
Представьте себе, что ваш пользователь заходит на страницу с большим количеством данных или делает запрос к серверу. В это время интерфейс может "замереть", и пользователь не будет знать, что происходит. Здесь на помощь приходит лоадер!

Лоадер — это отличный способ визуально информировать пользователей о том, что выполняется какой-то процесс. Он позволяет:

- Уменьшить уровень неопределенности у пользователей.
- Повысить общую удовлетворенность от использования вашего приложения.
- Сохранить внимание пользователей, пока они ждут загрузку информации.

Вот пример, лоадер которым пользуюсь я:

Код:

<div class="info_block_loader">
<span class="loader"></span>
<p style="margin-top: 5px; font-weight: bold">Загрузка</p>
</div>

<style>
    .loader {
        width: 50px;
        height: 50px;
        border: 5px solid #6ebeff;
        border-bottom-color: #337AB7;
        border-radius: 50%;
        display: inline-block;
        box-sizing: border-box;
        animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
    .info_block_loader {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }
</style>

Пример использования:
1. Добавляем на форму стандартный виджет "Строка".
2. В строку из пункта 1 добавляем стандартный виджет "Код" и вписываем туда код, который представлен выше.
3. В контексте формы создаем переменную с типом "Да/нет", например - "Показать лоадер".
4. В настройках строки из пункта 1 установим видимость в состояние "Показать по условию" и свяжем с переменной из пункта 3
5. Управлем видимостью лоадера изменяя значение переменной из пункта 3. Если значение = Да - лоадер отобразиться, значение = Нет - лоадер будет скрыт.

Еще больше полезной информации в ТГ канале WhatDaELMA365