Замена полосы загрузки на спиннер

Добрый день! Дублирую свой вопрос из другой ветки:

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

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

Добрый день.

Простой способ заблокировать UI, это немного видоизменить стили из связанной темы:

.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;
    }

    // NEW: Disable UI
    &:not([style*="none"]) + .c-window-layout {
      pointer-events: none;
      user-select: none;
      opacity: .5;
    }
  }

Глеб

3 симпатии

Глеб, большое спасибо!!!