Привет!
Хочу поделиться с вами полезным примером - лоадер для интерфейсов.
Когда стоит задуматься о его использовании?
Представьте себе, что ваш пользователь заходит на страницу с большим количеством данных или делает запрос к серверу. В это время интерфейс может "замереть", и пользователь не будет знать, что происходит. Здесь на помощь приходит лоадер!
Лоадер — это отличный способ визуально информировать пользователей о том, что выполняется какой-то процесс. Он позволяет:
- Уменьшить уровень неопределенности у пользователей.
- Повысить общую удовлетворенность от использования вашего приложения.
- Сохранить внимание пользователей, пока они ждут загрузку информации.
Вот пример, лоадер которым пользуюсь я:
Код:
<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