ADN Open CIS
Сообщество программистов Autodesk в СНГ

11/07/2018

Пользовательский индикатор загрузки для Viewer

Мы все любим Forge! Давайте выразим это, показывая, что сердце бьется, пока наша модель загружается. 

Средство просмотра Viewer показывает три точки, и в основном это div с классом spinner и три div внутри. Мы можем заменить это содержимое div на что-либо и/или изменить встроенный класс, но должны быть супер-быстрыми (так как GIF, вероятно, не достаточно быстрый для загрузки).

Как насчет индикатора на чистом CSS? К счастью, таких есть несколько, и для этого поста я выбрал loading.io (лицензия CC0). Сначала давайте скопируем исходный CSS код бьющегося сердца и сделаем некоторые основные настройки, как показано ниже.

Код - CSS: [Выделить]
  1. .lds-heart {
  2.     /* Добавлено */
  3.     margin: auto;
  4.     position: absolute;
  5.     top: 0;
  6.     left: 0;
  7.     bottom: 0;
  8.     right: 0;
  9.     visibility: visible;
  10.     text-align: center;
  11.  
  12.     /* Изменено */
  13.     display: inline-block;
  14.     width: 64px;
  15.     height: 64px;
  16.     transform: rotate(45deg);
  17.     transform-origin: 32px 32px;
  18. }
  19. .lds-heart div {
  20.     top: 23px;
  21.     left: 19px;
  22.     position: absolute;
  23.     width: 26px;
  24.     height: 26px;
  25.     background: #fff;
  26.     animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
  27. }
  28. .lds-heart div:after, .lds-heart div:before {
  29.     content: " ";
  30.     position: absolute;
  31.     display: block;
  32.     width: 26px;
  33.     height: 26px;
  34.     background: #fff;
  35. }
  36. .lds-heart div:before {
  37.     left: -17px;
  38.     border-radius: 50% 0 0 50%;
  39. }
  40. .lds-heart div:after {
  41.     top: -17px;
  42.     border-radius: 50% 50% 0 0;
  43. }
  44. @keyframes lds-heart {
  45.     0% {
  46.         transform: scale(0.95);
  47.     }
  48.     5% {
  49.         transform: scale(1.1);
  50.     }
  51.     39% {
  52.         transform: scale(0.85);
  53.     }
  54.     45% {
  55.         transform: scale(1);
  56.     }
  57.     60% {
  58.         transform: scale(0.95);
  59.     }
  60.     100% {
  61.         transform: scale(0.9);
  62.     }
  63. }

Теперь нам нужно изменить встроенный spinner div. Для этого давайте использовать следующую функцию. Примечание. Я использую чистый JavaScript DOM для получения элемента (по имени класса), заменяю его класс и заменяя его содержимое (оригинал содержит 3 divs, нам нужен 1 для этого примера).

Код - JavaScript: [Выделить]
  1. function replaceSpinner() {
  2.   var spinners = document.getElementsByClassName("spinner");
  3.   if (spinners.length == 0) return;
  4.   var spinner = spinners[0];
  5.   spinner.classList.remove("spinner");
  6.   spinner.classList.add('lds-heart');
  7.   spinner.innerHTML = '<div></div>';
  8. }

Наконец, запустим эту функцию сразу после вызова .selectItem из документа. Предполагая, что у вас есть код, подобный Basic Application, он должен выглядеть так:

Код - JavaScript: [Выделить]
  1. viewerApp.selectItem(viewables[0].data, onItemLoadSuccess, onItemLoadFail); // эта строка уже здесь
  2. replaceSpinner(); // это наша функция

Источник: https://forge.autodesk.com/blog/custom-viewer-loading-spinner

Автор перевода: Дмитрий Емельянов
Опубликовано 11.07.2018