Angular 2+ Приложение предварительной загрузки с индикатором процента

Кто-нибудь знает хорошее решение для реализации предварительного загрузчика Angular 2+ с процентным индикатором (похоже на экран загрузки Gmail)?

Я знаю, что обычный способ добавить <div> внутри нашего <app-root> и стилизовать его, возможно, даже добавить CSS-анимацию, и он будет заменен содержимым приложения после загрузки приложения.

Но... То, что я на самом деле ищу, - это отображение анимированного заставки ( SVG или чего-либо еще), где после завершения анимации должна появиться панель загрузки и показать статус прогресса.

введите описание изображения здесь

Сначала я думал об отдельном компоненте-всплеске, который будет загружен только компонентом, и оттуда загрузят все другие модули, но если я сопоставлю этот компонент с '/', как отобразить его на любом другом маршруте в качестве первого (начальная точка). Кроме того, это означает, что основной пакет Angular должен быть уже загружен, так что это не очень хороший вариант.

Скорее всего, этот вопрос слишком широкий и не подходит для переполнения стека, но я не могу найти ни одного хорошего решения для этого.:(

Есть ли способ загрузить обычный JavaScript без Angular, который будет загружать Angular и отображать прогресс? Или любая другая (лучшая) идея?

Это должно быть достижимо, так как весь Gmail - приложение Angular, и у них это есть:D

Источник

6 ответов

Вы можете попробовать ngx-progressbar, это действительно круто. API не тривиален, но хорошо документирован, поэтому вы можете построить индикатор выполнения любой сложности.

UPD После обсуждения я бы предложил следующий подход (index.html)

1) Обеспечить индикатор выполнения на уровне HTML:

<my-app>
  <div style="width: 100%; background-color: grey;">
    <div id="myProgressBar" style="width: 1%; height: 30px; background-color: green;">
    </div>
  </div>
</my-app>

2) Загрузите комплект приложений и вставьте его в DOM вручную через XMLHttpRequest

const tag = document.createElement('script');
const xhr = new XMLHttpRequest();
xhr.open('GET', 'my-angular-app-bundle.js?' + new Date().getTime());
xhr.onloadend = (e) => document.head.appendChild(tag);
xhr.send();

3) Использование XMLHttpRequest.onprogress следить за прогрессом и обновлять параметры индикатора выполнения

const barElement = document.getElementById('myProgressBar');
xhr.onprogress = (e) => {
  if (e.lengthComputable) {
    const width = 100 * e.loaded / + e.total;
    barElement.style.width = width + '%';
  }
}

Делать onprogress обновления более гладкие, вы можете увеличить ширину индикатора выполнения в setInterval цикл:

if (e.lengthComputable) {
  const endWidth = 100 * e.loaded / + e.total;
  const intervalId = setInterval(() => {
    const width = parseInt(barElement.style.width, 10);
    if (width >= endWidth) {
      clearInterval(intervalId);
    } else {
      width += 2; 
      barElement.style.width = width + '%'; 
    }
  }, 40);
}
Источник

Я использовал PACE в своем угловом приложении, чтобы показать индикатор выполнения для заставки. Вы также можете показать, как вы хотите. Вам необходимо пройти по ссылке ниже:

Индикатор автоматической загрузки страницы

Надеюсь, это поможет вам.

Источник

Иногда загрузка на основе тегов более эффективна, вы можете использовать PreloadJS библиотека. Вы также можете вручную отслеживать конец загрузки скрипта, используя onload события и искусственно интерполировать прогресс, чтобы создать впечатление, что приложение загружается с постоянной скоростью. Gmail, вероятно, вообще не показывает фактический прогресс, он просто ждет окончания загрузки, отображая фальшивый устойчивый прогресс с использованием таймеров.

Источник

Я не думаю, что индикатор загрузки показывает загрузку приложения. Я думаю, что это показывает загрузку данных после загрузки приложения. Представьте себе данные, такие как письма, контакты и т. Д. Я думаю, что загрузка gmail разделена на две части.

Часть 1: Показать простую анимацию (без индикатора загрузки), пока запускается само это приложение.

Часть 2. Теперь приложение начало отображать эту загрузочную анимацию. Далее, укажите, сколько запросов данных вам нужно сделать, и добавьте для этого панель загрузки.

Вы можете использовать это для запуска анимации.

Источник


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

Реализация Simble PROgress Bar Angular/на стороне сервера

Источник

Единственный способ, которым я думаю, - это подключить ваше приложение к CLI и отобразить прогресс, который он показывает, из самой командной строки.

Источник
Другие вопросы по тегам