discourse/app/views/common/_discourse_splash.html.erb

<%- unless customization_disabled? %>
<section id="d-splash">
  <style>
    html {
      overflow-y: hidden !important;
    }

    #d-splash {
      display: grid;
      place-items: center;
      backface-visibility: hidden;
      background: var(--secondary);
      position: absolute;
      width: 100%;
      z-index: 1001;
      --animation-state: paused;
    }

    #d-splash .preloader-image {
      max-width: 100%;
      height: 100vh;
    }

    #d-splash .preloader-text-wrapper {
      position: absolute;
      opacity: 0;
      animation: fade-in 0.5s ease-in-out;
      animation-delay: 1s;
      animation-fill-mode: forwards;
      animation-play-state: var(--animation-state);
      color: var(--primary);
      margin-bottom: -4em;
    }

    #d-splash .preloader-text:after {
      animation: loading-text 3s infinite;
      content: "";
      position: absolute;
      margin: 0 0.1em;
      left: 100%;
    }

    .rtl #d-splash .preloader-text:after {
      left: 0;
      right: 100%;
    }

    @keyframes fade-in {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    @keyframes loading-text {
      0% {
        content: "";
      }
      25% {
        content: ".";
      }
      50% {
        content: "..";
      }
      75% {
        content: "...";
      }
    }
  </style>

  <img
    class="preloader-image"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'%0A%3E%3Cstyle%3E /* these need to be injected dynamicly to match theme colors */ :root %7B --primary: %23222222; --secondary: %23ffffff; --tertiary: %23f15c21; --highlight: %23f0ea88; --quaternary: %2365ccff; --success: %23009900; --animation-state: paused; %7D /* these styles need to live here because the SVG has a different scope */ .dots %7B animation-name: loader; animation-timing-function: ease-in-out; animation-duration: 3s; animation-iteration-count: infinite; animation-play-state: var(--animation-state); stroke: %23fff; stroke-width: 0.5px; transform-origin: center; opacity: 0; r: max(1vw, 11px); cy: 50%25; %7D .dots:first-child %7B fill: var(--tertiary); %7D .dots:nth-child(2) %7B fill: var(--tertiary); animation-delay: 0.15s; %7D .dots:nth-child(3) %7B fill: var(--highlight); animation-delay: 0.3s; %7D .dots:nth-child(4) %7B fill: var(--quaternary); animation-delay: 0.45s; %7D .dots:nth-child(5) %7B fill: var(--quaternary); animation-delay: 0.6s; %7D @keyframes loader %7B 0%25 %7B opacity: 0; transform: scale(1); %7D 45%25 %7B opacity: 1; transform: scale(0.7); %7D 65%25 %7B opacity: 1; transform: scale(0.7); %7D 100%25 %7B opacity: 0; transform: scale(1); %7D %7D %3C/style%3E%3Cg class='container'%3E%3Ccircle class='dots' cx='30vw' /%3E%3Ccircle class='dots' cx='40vw' /%3E%3Ccircle class='dots' cx='50vw' /%3E%3Ccircle class='dots' cx='60vw' /%3E%3Ccircle class='dots' cx='70vw' /%3E%3C/g%3E%3C/svg%3E%0A"
    alt="<%=SiteSetting.title%>"
  />

  <div class="preloader-text-wrapper">
    <div class="preloader-text"><%= I18n.t("js.preloader_text") %></div>
  </div>

  <noscript>
    <style>
      html {
        overflow-y: revert !important;
      }

      #d-splash {
        display: none;
      }
    </style>
  </noscript>

  <script nonce="<%= ApplicationHelper.splash_screen_nonce %>">
    const DELAY_TARGET = 2000;
    const POLLING_INTERVAL = 50;

    const splashWrapper = document.querySelector("#d-splash");
    const splashImage = splashWrapper?.querySelector(".preloader-image");

    if (splashImage) {
      const connectStart = performance?.timing?.connectStart || 0;
      const splashDelay = connectStart ? DELAY_TARGET : 0;
      const targetTime = connectStart + DELAY_TARGET;

      let splashInterval;
      let discourseReady;

      const swapSplash = () => {
        splashWrapper?.style.setProperty("--animation-state", "running");

        splashImage.src = splashImage.src.replace(
          "--animation-state: paused;",
          "--animation-state: running;"
        );

        performance.mark("discourse-splash-visible");

        clearSplashInterval();
      };

      const clearSplashInterval = () => {
        clearInterval(splashInterval);
        splashInterval = null;
      };

      (() => {
        splashInterval = setInterval(() => {
          if (discourseReady) {
            clearSplashInterval();
          }

          if (Date.now() > targetTime) {
            swapSplash();
          }
        }, POLLING_INTERVAL);
      })();

      document.addEventListener(
        "discourse-ready",
        () => {
          discourseReady = true;
          splashWrapper?.remove();
          performance.mark("discourse-splash-removed");
        },
        { once: true }
      );
    }
  </script>
</section>
<%- end %>