How to add a loading mark picture? ASAP

Ask & Offer
, , ,
1

I want to add a loading mark.

I want the logo image to be displayed while the page is loading, so please tell me how to edit it using CSS or code.

The idea is to have a plain background with the logo displayed in the center, fading in and out. I want the display position to be centered both vertically and horizontally.

Since the site is not public yet, please use a path for now. The theme I am using is:
Madrid 1.4.0 (Preset: Madrid)

pas hfh2025

8A90B170-66B8-4594-8A47-7AFAA7751A35
8A90B170-66B8-4594-8A47-7AFAA7751A351170×2532 703 KB

2

Hi @BY2025

I’m not using theme Madrid, so you can refer to my code on theme Horizon and adapt it to your own code.

1, Create a new file: snippets/loading-screen.liquid.

Create a new HTML loading screen structure with an SVG logo.

<div id="loading-screen" class="loading-overlay">
  <div class="loading-logo">
{% # Update your logo %}
    <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <circle cx="50" cy="50" r="40" fill="none" stroke="#800020" stroke-width="4"/>
      <text x="50" y="55" font-family="Arial, sans-serif" font-size="20" fill="#800020" text-anchor="middle">LOGO</text>
    </svg>
  </div>
</div>

2, Update file: layout/theme.liquid

Add loading render below body tag

...
<body ... />
  {% render 'loading-screen' %}
...

3, Add css in the bottom file: assets/base.css

...
/* Loading Screen Styles */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease-out;
}

.loading-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loading-logo {
  animation: fadeInOut 2s ease-in-out infinite;
}

4, Create a new file: assets/loading-screen.js

Create new JavaScript to hide the loading screen after the page has finished loading.

window.addEventListener('load', function() {
  const loadingScreen = document.getElementById('loading-screen');
  if (loadingScreen) {
    loadingScreen.classList.add('fade-out');
    setTimeout(function() {
      loadingScreen.style.display = 'none';
    }, 500);
  }
});

5, Update file to add script: snippets/scripts.liquid

...
<script src="{{ 'loading-screen.js' | asset_url }}" defer></script>
...

After all that, I have the result.

image
image1650×874 88.5 KB

The logo will fade out once it finishes loading. Good luck!