...

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

Тема в разделе "Примеры сценариев", создана пользователем ksannikov, 7 июл 2025 в 12:59.

  1. ksannikov

    ksannikov Участник

    [​IMG]
    Привет!

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

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

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

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

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

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

    <
    style>
        .
    loader {
            
    width50px;
            
    height50px;
            
    border5px solid #6ebeff;
            
    border-bottom-color#337AB7;
            
    border-radius50%;
            
    displayinline-block;
            
    box-sizingborder-box;
            
    animationrotation 1s linear infinite;
        }

        @
    keyframes rotation {
            
    0% {
                
    transformrotate(0deg);
            }

            
    100% {
                
    transformrotate(360deg);
            }
        }
        .
    info_block_loader {
            
    margin0;
            
    padding0;
            
    displayflex;
            
    flex-directioncolumn;
            
    justify-contentcenter;
            
    align-itemscenter
        
    }
    </
    style>
    Пример использования:
    1. Добавляем на форму стандартный виджет "Строка".
    2. В строку из пункта 1 добавляем стандартный виджет "Код" и вписываем туда код, который представлен выше.
    3. В контексте формы создаем переменную с типом "Да/нет", например - "Показать лоадер".
    4. В настройках строки из пункта 1 установим видимость в состояние "Показать по условию" и свяжем с переменной из пункта 3
    5. Управлем видимостью лоадера изменяя значение переменной из пункта 3. Если значение = Да - лоадер отобразиться, значение = Нет - лоадер будет скрыт.

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