Как изменить анимацию заставки Discourse?

Поддержка
9

Вы не можете напрямую редактировать шаблон ERB для экрана загрузки из темы, а поскольку экран загрузки отображается до загрузки основных CSS/JS, его кастомизация затруднена.

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

Тем не менее, вы можете переопределить анимацию экрана загрузки, внедрив встроенный CSS внутрь тега head_tag вашей темы. Это обеспечит немедленное применение ваших стилей и предотвратит мерцание точек по умолчанию.

Вот пример, который заменяет анимацию точек по умолчанию на эффект Pulser, похожий на тот, что в вашем Codepen:

<style>
  :root {
    --pulser-color-1: #ffcc00;
    --pulser-color-2: #ff6347;
  }
  #d-splash .dots {
    all: unset;
    position: absolute;
    width: 1.6em;
    height: 1.6em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #d-splash .dots[style*="--n:-2"] { transform: translate(-300%, -50%); }
  #d-splash .dots[style*="--n:-1"] { transform: translate(-150%, -50%); }
  #d-splash .dots[style*="--n:0"]  { transform: translate(0%, -50%); }
  #d-splash .dots[style*="--n:1"]  { transform: translate(150%, -50%); }
  #d-splash .dots[style*="--n:2"]  { transform: translate(300%, -50%); }
  #d-splash .dots::before,
  #d-splash .dots::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--pulser-color-1);
    top: 0;
    left: 0;
    opacity: 0;
    animation: pulse 1s ease-out infinite;
  }
  #d-splash .dots::before {
    border-color: var(--pulser-color-2);
    animation-delay: 0.3s;
  }
  @keyframes pulse {
    0% {
      transform: scale(0.5);
      opacity: 0.6;
    }
    50% {
      transform: scale(1.2);
      opacity: 0.3;
    }
    100% {
      transform: scale(1.8);
      opacity: 0;
    }
  }
</style>

Примечание: браузер не может парсить SCSS внутри тега <style>. Поэтому вы не можете просто вставить SCSS внутрь. Вместо этого используйте CSS.

Результат:

pulsereffect

Вам нужно создать новый компонент темы, нажать «Редактировать код», открыть тег Head и вставить вышеуказанный блок <style>.

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

Это удобное решение, пока в Discourse не будет реализована более гибкая настройка экранов загрузки в запланированном обновлении v2.