Как изменить стиль progress bar (строки загрузки)

Добрый день.
В данный момент при загрузке данных в окнах или запуске методов в верхней части окна появляется бегущая синяя полоска (progress bar), которую часто не замечают пользователи.
Возможно ли ее заменить на другого рода анимацию? Хотелось бы, чтобы что-то вроде крутящейся окружности висело прямо посередине экрана.
В данный момент я нашел решение в использовании BackgroundWorkWindow для каждого действия, но это очень неудобно.

Добрый день,

Индикатор загрузи имеет CSS класс v-loading-indicator. Вы можете написать свои стили для него в расширении темы. Для примера, чтобы заменить полосу на спиннер, можно добавить следующие стили:

.v-loading-indicator {
  $spinner-size: 64px;

  @include valo-spinner($size: $spinner-size, $thickness: 4px);

  background: transparent;
  z-index: 100;

  $offset: ceil($spinner-size/2);
  top: calc(50% - $offset);
  left: calc(50% - $offset);

  &[style*="none"] {
    @include transition(none);
    width: $spinner-size !important;
  }
}

Глеб

3 симпатии

Глеб, добрый день!

Поставил ваш стиль на разрабатываемую систему. И вроде бы все хорошо, но вот слишком он надоедливым получается. Т.е. даже при переходе из поля в поле на короткое время вызывается, что обычно не замечается глазом при использовании стандартного прогресс-бара.
Подскажите, нет ли возможности управлять временем, при котором система считается ожидающей ответа от сервера и соответственно вызывается прогресс-бар?

Добрый день!

Чтобы управлять временем при котором начинает показываться Loading Indicator необходимо получить доступ к LoadingIndicatorConfiguration. Для этого следует расширить класс AppUI, например:

import com.haulmont.cuba.web.AppUI;
import com.vaadin.server.VaadinRequest;

public class CustomAppUI extends AppUI {
    @Override
    protected void init(VaadinRequest request) {
        super.init(request);

        getLoadingIndicatorConfiguration().setFirstDelay(1000);
    }
}

и зарегистрировать свой класс в web-spring.xml:

<bean id="cuba_AppUI" class="com.company.example.web.CustomAppUI" scope="prototype"/>

Глеб

3 симпатии

Глеб, здравствуйте!

Я применил ваши рекомендации, работает отлично. Но хотелось бы уточнить, можно ли при этом блокировать действия на экране? Так, чтобы пользователь не мог ничего нажимать, пока идет загрузка.

С уважением,
Никита