Пользовательский индикатор загрузки для Viewer
Мы все любим Forge! Давайте выразим это, показывая, что сердце бьется, пока наша модель загружается.
Средство просмотра Viewer показывает три точки, и в основном это div с классом spinner и три div внутри. Мы можем заменить это содержимое div на что-либо и/или изменить встроенный класс, но должны быть супер-быстрыми (так как GIF, вероятно, не достаточно быстрый для загрузки).
Как насчет индикатора на чистом CSS? К счастью, таких есть несколько, и для этого поста я выбрал loading.io (лицензия CC0). Сначала давайте скопируем исходный CSS код бьющегося сердца и сделаем некоторые основные настройки, как показано ниже.
- .lds-heart {
- /* Добавлено */
- margin: auto;
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- visibility: visible;
- text-align: center;
- /* Изменено */
- display: inline-block;
- width: 64px;
- height: 64px;
- transform: rotate(45deg);
- transform-origin: 32px 32px;
- }
- .lds-heart div {
- top: 23px;
- left: 19px;
- position: absolute;
- width: 26px;
- height: 26px;
- background: #fff;
- animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
- }
- .lds-heart div:after, .lds-heart div:before {
- content: " ";
- position: absolute;
- display: block;
- width: 26px;
- height: 26px;
- background: #fff;
- }
- .lds-heart div:before {
- left: -17px;
- border-radius: 50% 0 0 50%;
- }
- .lds-heart div:after {
- top: -17px;
- border-radius: 50% 50% 0 0;
- }
- @keyframes lds-heart {
- 0% {
- transform: scale(0.95);
- }
- 5% {
- transform: scale(1.1);
- }
- 39% {
- transform: scale(0.85);
- }
- 45% {
- transform: scale(1);
- }
- 60% {
- transform: scale(0.95);
- }
- 100% {
- transform: scale(0.9);
- }
- }
Теперь нам нужно изменить встроенный spinner div. Для этого давайте использовать следующую функцию. Примечание. Я использую чистый JavaScript DOM для получения элемента (по имени класса), заменяю его класс и заменяя его содержимое (оригинал содержит 3 divs, нам нужен 1 для этого примера).
- function replaceSpinner() {
- var spinners = document.getElementsByClassName("spinner");
- if (spinners.length == 0) return;
- var spinner = spinners[0];
- spinner.classList.remove("spinner");
- spinner.classList.add('lds-heart');
- spinner.innerHTML = '<div></div>';
- }
Наконец, запустим эту функцию сразу после вызова .selectItem из документа. Предполагая, что у вас есть код, подобный Basic Application, он должен выглядеть так:
- viewerApp.selectItem(viewables[0].data, onItemLoadSuccess, onItemLoadFail); // эта строка уже здесь
- replaceSpinner(); // это наша функция
Источник: https://forge.autodesk.com/blog/custom-viewer-loading-spinner
Обсуждение: http://adn-cis.org/forum/index.php?topic=
Опубликовано 11.07.2018