Как использовать Angular SVG круглый индикатор выполнения с размытым фоном?

Предполагая, что ваши сообщения асинхронны, его скрипка показывает, как вы можете это сделать.

вы устанавливаете угловые привязки следующим образом:

1) используйте ng-класс в div или другом элементе, который вы можете связать с классом blur css, в зависимости от структуры вашего кода вы можете отключить класс "blur" css на счетчике прогресса.

2) на индикаторе выполнения привязывает свойство current к переменной счетчика тиков в вашей области $.

3), когда вы отправляете сообщение, также начинайте с $ interval с функцией увеличения тика, которая повторяется до тех пор, пока вы не получите обратный вызов, который остановит инкремент, сбросит класс размытия на ваш div и заполнит таблицу результатов.

Вы упомянули, что у вас есть две должности, вы можете явно установить значение currentTicks, когда вы получите первый ответ (например, если это 50% работы, вы установили ее равной 50).

вам, вероятно, понадобится работать с некоторой магией абсолютного положения CSS, чтобы ваш индикатор прогресса отображался в точном правильном месте (и мой отображается с самого начала, но вы можете использовать связанный класс css, чтобы он отображался: none до его готовности показывать)

edit: Я не упоминал blur css, я только что снял его с BenSlight. Здесь ответ Blur-эффект на элемент div

редактировать очищенное размытие...

form.blur {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}

дополнительная информация, основанная на комментариях. - после завершения вашего POST вам нужно удалить класс размытия из элемента, если вы привязали класс к угловому элементу (скажем, bgClass) $ scope.bgclass= ""; очистит его.

• re: тайминги, проблема с использованием этой конкретной визуализации в процентах заключается в том, что вам нужно как-то знать, когда она достигнет 100%. т.е. вызовы всегда завершаются через 40 секунд, или вы каждый раз проверяете или получаете обратные вызовы с индикатором прогресса. Лучшее, что вы можете сделать с текущей настройкой, которую я изложил здесь, и удерживать ее в процентах, - это настроить количество интервалов или максимальное значение на диаграмме, чтобы оно не закончилось до завершения обработки POST.

-re: позиционируя ваш оверлей, некоторые статические css применяются к div прогресса, что делает его немного сложным, но вы можете поместить отдельный div вокруг него и применить к нему следующий стиль (опять же, вы захотите добавить этот класс к элементу, когда вы запускаете процесс, и удалите его после завершения POST) - вам, вероятно, потребуется настроить эти значения заполнения для достижения наилучших результатов. Если вы посмотрите вокруг SO, вы, вероятно, найдете более простой css css для наложений tbh. (Я обновил скрипку на примере)

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100px;
    height: 100%;
    margin: 0 auto;
    padding-left: 40%;
    padding-top: 30%;
    z-index: 5;
}