Logo loading screen - code adjustment please

Where do I place this code to make it work?

On 9/29/2021 at 1:05 AM, Victoria916 said:

Hey @tuanphan I am having a similar challenge wherein my client wants scrolling to be disabled while the homepage loading screen is displayed (for 4 seconds). Do you have a script code that will disable scrolling temporarily?

site: https://iced-media-redesign.squarespace.com/

password: icedmedia

Add to Page Header

<style>
  html, body {overflow:hidden;}
</style>

@alphashaving Add to Code Injection Footer

Hi, how do I make it so I don't get a flicker of the website before the loading screen? Thanks. 

On 10/30/2019 at 2:15 PM, tuanphan said:

@rdreed Your code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="logoload"></div>
<style>
.logoload {
  /* SET BACKGROUND COLOR */
  background-color: #fff;
  /* SET BACKGROUND SIZE */
  background-size: 90px;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("https://static1.squarespace.com/static/5d9db9630e0cb109b5331185/t/5db877bc05d8093cb6fbfe15/1572370384602/mrnice-smiley.gif");
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(500).fadeOut("slow");
})
</script>

 

Hi @tuanphan Could this code take as load- logo my Site Title (what goes as text)? Thanks!

On 4/27/2022 at 2:19 PM, geglaja said:

Hi @tuanphan Could this code take as load- logo my Site Title (what goes as text)? Thanks!

You mean change Loading Image to Site Title text?

On 4/30/2022 at 11:08 AM, tuanphan said:

You mean change Loading Image to Site Title text?

Yes @tuanphan

On 5/2/2022 at 3:18 PM, geglaja said:

Yes @tuanphan

Try adding this under above code

<style>
  .logoload {
  	visibility: hidden !important;
  }
  .logoload:before {
  	visibility: visible !important;
    content: "Enter text here";
    position: fixed;
    top: 50%;
      left: 50%;
    transform: translate(-50%,-50%);
    width: 100%:
      text-align: center;
    z-index: 9999;      
  }
</style>

Hi everyone !
Does anyone know how to use a lottie json file instead of a gif for the logoload?
 

Is there a way to have it so that this loading page only appears once when the site visitor clicks through to homepage.

Currently ours appears every time you click back to the homepage - https://www.affixxius.com/

As well as on the pages we have set up for our portfolios

https://www.affixxius.com/video-production/agency

https://www.affixxius.com/video-production/brand-video-production

https://www.affixxius.com/video-production/school-video-production

Hi @tuanphan, I am praying for your help to get this code working on my site. I have used your updated code from here. I sent a request through beaverhero for help. 

https://seadragon-pomegranate-hh3y.squarespace.com/

password: LoadScreen

I have the finished website &  the finished GIF. I just need to get the GIF to play as a loading screen ❤️  I would really appreciate your help!

Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="logoload"></div>
<style>
.logoload {
  /* SET BACKGROUND COLOR */
  background-color: #1D3A2C;
  /* SET BACKGROUND SIZE */
  background-size: 900px;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("https://static1.squarespace.com/static/64aa6d5745ef1e7f3d05f43c/t/64b3976b26c7c9774f07f98d/1689491314288/EnterComms-Final-Square.gif");
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(500).fadeOut("slow");
})
</script>

On 7/16/2023 at 3:40 PM, Capoda said:

Hi @tuanphan, I am praying for your help to get this code working on my site. I have used your updated code from here. I sent a request through beaverhero for help. 

https://seadragon-pomegranate-hh3y.squarespace.com/

password: LoadScreen

 

I have the finished website &  the finished GIF. I just need to get the GIF to play as a loading screen ❤️  I would really appreciate your help!

 

Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="logoload"></div>
<style>
.logoload {
  /* SET BACKGROUND COLOR */
  background-color: #1D3A2C;
  /* SET BACKGROUND SIZE */
  background-size: 900px;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("https://static1.squarespace.com/static/64aa6d5745ef1e7f3d05f43c/t/64b3976b26c7c9774f07f98d/1689491314288/EnterComms-Final-Square.gif");
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(500).fadeOut("slow");
})
</script>

This code looks correct. What is problem with code?

I am curious if there is a way to set the load time? I want my animation to play in full (3-5sec) even if the site loads faster.

On 11/4/2023 at 2:30 AM, 48thmediaco said:

I am curious if there is a way to set the load time? I want my animation to play in full (3-5sec) even if the site loads faster.

Which code did you use? Suppose this code (this is latest code I wrote recently). This will create a black background with a background image + logo in middle of screen

To set play time, you can change animation-delay: 5s; in the code

<!-- Container for the splash screen with a specified ID -->
<div class="splash-wrapper" id="loader-container">
    <!-- Lottie animation player -->
    <img src="/s/valentinfollietlogowhite.png"/>
</div>

<style>
  div#loader-container img {
    max-width:500px;
}
  /* Loader animation styles */
  .splash-wrapper {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 9999;
    background-color: #000000;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    animation-name: slideOut;
    animation-fill-mode: forwards;
    animation-duration: 0.65s;
    animation-delay: 5s;
    background-image: url(https://teambooks.org/wp-content/uploads/2023/11/Echine-min-scaled.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  @keyframes slideOut {
    from {
      margin-left: 0vw;
    }
    to {
      margin-left: -100vw;
    }
  }
  @media screen and (max-width:767px) {
  div#loader-container {
    background-size: cover;
}
div#loader-container img {
    max-width: 300px;
}
  }
</style>
<script>
  // Check if the animation state is stored in sessionStorage
  const isAnimationPlayed = sessionStorage.getItem("animationPlayed");

  // Reference to the splash-wrapper div with a specified ID
  const splashWrapper = document.getElementById("loader-container");

  // If the animation has already played, hide it and remove it from the DOM
  if (isAnimationPlayed) {
    splashWrapper.style.display = "none";
    splashWrapper.remove(); // Remove the splash wrapper from the DOM
  } else {
    // If the animation hasn't played yet, mark it as played and store it in sessionStorage
    sessionStorage.setItem("animationPlayed", "true");
  }
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    setTimeout(function(){
        $('.splash-wrapper img').fadeIn(500);
    }, 3000);
});
</script>

Hi @tuanphan

Thank you for your help with this topic!

I am trying to use this code and make it responsive to different screen sizes. It's too big on the computer and too small on mobile. Can you help me make it work so it responds to different screen sizes?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="logoload"></div>
<script>
$(function() {
  var loadLogo = $('header').find('img').attr('src');
  $('.logoload').css('background-image', 'url(' + loadLogo + ')');
});
</script>
<style>
.logoload {
  /* SET BACKGROUND COLOR */
  background-color: black !important;
  /* SET BACKGROUND SIZE */
  background-size: 70vw;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-position: center;
  background-repeat: no-repeat;
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(100).fadeOut("slow");
})
</script>

Thank you!

On 2/16/2024 at 8:14 AM, Arjuna said:

Hi @tuanphan

Thank you for your help with this topic!

I am trying to use this code and make it responsive to different screen sizes. It's too big on the computer and too small on mobile. Can you help me make it work so it responds to different screen sizes?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="logoload"></div>
<script>
$(function() {
  var loadLogo = $('header').find('img').attr('src');
  $('.logoload').css('background-image', 'url(' + loadLogo + ')');
});
</script>
<style>
.logoload {
  /* SET BACKGROUND COLOR */
  background-color: black !important;
  /* SET BACKGROUND SIZE */
  background-size: 70vw;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-position: center;
  background-repeat: no-repeat;
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(100).fadeOut("slow");
})
</script>

Thank you!

Add this code under, if it doesn't work, please share site url, we can check easier

<style>
  @media screen and (max-width:767px) {
    .logoload {
    	background-size: contain !important;
    }
  }
</style>