Отображение на странице компонента Loader

Не всегда какие-то операции в системе, например, загрузка данных, выполняются мгновенно. И при этом пользователю не всегда очевидно, есть ли какая-то проблема с работой системы, отображением на странице или же просто нужно подождать какое-то время. Для обозначения пользователю того, что происходит загрузка данных или выполнение какой-либо операции, подойдет компонент Loader (Спиннер загрузки).

Создадим страницу в разделе или страницу портала. Перейдем в ее конструктор. Создадим виджет-код на странице. В нем пропишем HTML-код с классом для вывода элемента, стили для него, а также JS-код с вызовом функции loadWidget() из клиентского сценария.

Loader можно задать любой с любым дизайном, например пусть это будет элемент в цветах ELMA. Обязательно пропишем класс loader-wrapper_active и укажем в стилях этого класса opacity и visibility для того, чтобы управлять отображением элемента Loader.

Код:

<div class="loader-wrapper loader-wrapper_active">
    <div class="loader"></div>
</div>

<style>
.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 0;
  visibility: hidden;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.loader  {
  animation: rotate 1s infinite;
  height: 50px;
  width: 50px;
}

.loader:before,
.loader:after {
  border-radius: 50%;
  content: '';
  display: block;
  height: 20px;
  width: 20px;
}
.loader:before {
  animation: ball1 1s infinite;
  background-color: #E62D32;
  box-shadow: 30px 0 0 #FABE00;
  margin-bottom: 10px;
}
.loader:after {
  animation: ball2 1s infinite;
  background-color: #5082E6;
  box-shadow: 30px 0 0 #5AD2FF;
}

.loader-wrapper_active{
  opacity: 1;
  visibility: visible;
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(0.8);
    -moz-transform: rotate(0deg) scale(0.8);
  }
  50% {
    -webkit-transform: rotate(360deg) scale(1.2);
    -moz-transform: rotate(360deg) scale(1.2);
  }
  100% {
    -webkit-transform: rotate(720deg) scale(0.8);
    -moz-transform: rotate(720deg) scale(0.8);
  }
}

@keyframes ball1 {
  0% {
    box-shadow: 30px 0 0 #FABE00;
  }
  50% {
    box-shadow: 0 0 0 #FABE00;
    margin-bottom: 0;
    -webkit-transform: translate(15px,15px);
    -moz-transform: translate(15px, 15px);
  }
  100% {
    box-shadow: 30px 0 0 #FABE00;
    margin-bottom: 10px;
  }
}

@keyframes ball2 {
  0% {
    box-shadow: 30px 0 0 #5AD2FF;
  }
  50% {
    box-shadow: 0 0 0 #5AD2FF;
    margin-top: -20px;
    -webkit-transform: translate(15px,15px);
    -moz-transform: translate(15px, 15px);
  }
  100% {
    box-shadow: 30px 0 0 #5AD2FF;
    margin-top: 0;
  }
}
</style>

<script>
    $(document).ready(function(){
        <%= Scripts%>.renderPage();
    });
</script>

Для иллюстрации примера был взят Loader из данного источника.

В конструкторе страницы перейдем на вкладку «Сценарии». Создадим клиентский сценарий:

Код:

// объявление необходимых констант и переменных
declare const console: any;
declare const window: any;
declare const document: any;

let loaderEl: any;

// функция для отображения Loader
function showLoader(){
    loaderEl.classList.add("loader-wrapper_active");
}
// функция для скрытия Loader
function hideLoader(){
    loaderEl.classList.remove("loader-wrapper_active");
}

// проверка загрузки элемента для вывода данных
async function renderPage(){
    let myInterval = window.setInterval(async() => {
        loaderEl = document.querySelector('.loader-wrapper');
        if (loaderEl) {
            window.clearInterval(myInterval);
            // вызов скрытия элемента Loader через 5 секунд
            window.setTimeout(hideLoader, 5000);
        }
    }, 200);
}

В этом коде мы сперва проверяем, что все нужные элементы на странице загружены, а далее скрываем Loader после пяти секунд, управляя его отображением через ранее упомянутый класс loader-wrapper_active. При его наличии элемент отображен, при его отсутствии – скрыт.

Если все настроено правильно, то на странице у нас отобразится Loader, который исчезнет через пять секунд:



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