XenForo 2.х.х - Делаем простой preloader (loader) на XenForo 2

Совместимость с XenForo

2.0.x
2.1.x
2.2.x

Создаем модификацию к шаблону PAGE_CONTAINER:
Тип поиска: Простая замена
Найти:

Код:

<body data-template="{$template}">

Заменить:

HTML:

$0
<div class="loader">
  <div class="loader_inner"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(window).on("load", function() {
  $(".loader_inner").fadeOut();
  $(".loader").delay(400).fadeOut("slow");
});
</script>

Конечно я сторонних особенно после санкций, копирование всех скриптов локально, если реализация планируется на постоянной основе.
Делаем модификацию шаблона extra.less.
Тип поиска: Регулярное выражение
Найти:

Код:

/$/

Заменить:

CSS:

$0
.loader {
  background: none repeat scroll 0 0 #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 9999;
}
 
.loader .loader_inner {
  background-image: url("styles/Preloader_8.gif");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #fff;
  height: 128px; /*тут меняем размер лоадера*/
  width: 128px; /*тут меняем размер лоадера*/
  margin-top: -30px;
  margin-left: -30px;
  left: 50%;
  top: 50%;
  position: absolute;
}

Получаем такой результат:

Сами варианты лоадеров находятся в архиве.

Реакции: hacker и sparco1988

XenForo 2.х.х Делаем простой preloader (loader) на XenForo 2 1.0.0

Ещё ресурсы от baltun