Logo loading screen - code adjustment please

rdreed · October 30, 2019

Hi everyone,

I bought a plugin from Squarestud.io and it appears that they dont respond to anyone's emails/facebook/instagram - I assume they have gone bust. Anyway, I need to tweak the plugin and I am not very good at .js and would appreciate some help.

The plugin is a logo loading screen using the site's logo. I am wanting to replace the image source (the existing site logo) with a gif that is stored in the site's CSS stored files - URL below.

Any help is really really really appreciated.

Thank you,

Rob
working site: https://pepper-clarinet-ctnt.squarespace.com/

GIF:

https://static1.squarespace.com/static/5d9db9630e0cb109b5331185/t/5db877bc05d8093cb6fbfe15/1572370384602/mrnice-smiley.gif

Code Injection:

<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: #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;
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(500).fadeOut("slow");
})
</script>

tuanphan · October 3, 2021

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

tuanphan · October 30, 2019

@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>

rdreed · October 30, 2019

@tuanphan THANK YOU! You are a lifesaver. I am sending you some positive vibes & karma. 🙏

Edited October 30, 2019 by rdreed

rdreed · October 30, 2019

@tuanphan You've already helped me massively, I was wondering If I could ask for your expertise again? Do you think it is possible for this loading page animation to only run when landing on the homepage and (like presently) not when landing on every page?

tuanphan · October 30, 2019

@rdreed Try

Style & Script code: Page Settings > Advanced > Insert the code to Header

And insert this code to bottom of page (you can use Markdown Block or Code Block to insert)

<div class="logoload"></div>

Edited October 30, 2019 by tuanphan

georgerobertatherton · December 9, 2019

Just used this thread - super helpful thank you @tuanphan and @rdreed

erinm892 · June 3, 2020

On 10/30/2019 at 5:03 AM, rdreed said:

CSS stored files

Hey @tuanphan ! This is super helpful! I am attempting almost the same thing, but instead of inserting a gif as the image source, I want to insert the logo. I just need a loading page with a white background and black logo. Since The logo is stored on my computer and doesn't have a URL is there a way to upload my logo to squarespace and give it a url? I saw above Rdreed mentioned that his gif was "stored in the site's CSS stored files".

Would appreciate any help you can give me! Thank you :)

victpo · June 6, 2020

@erinm892 you just have to upload the file to the CUSTOM CSS section under the DESIGN menu. There's an option to upload a file, and you click on it, and it should give you a Squarespace URL for it, as per the screenshot below. Once you upload the file, just click on it and the URL will appear on the code window. Just copy it, and there you have it!

victpo · June 6, 2020

Hey @tuanphan, you're a life saver! While the screen is loading, I noticed the user can scroll down and up. Is it possible to disable scrolling during the time this loading screen is shown? I'm using it as a GIF animation intro to my page, so I don't want them to be able to scroll while it loads.

tuanphan · June 9, 2020

On 6/7/2020 at 5:03 AM, victpo said:

Hey @tuanphan, you're a life saver! While the screen is loading, I noticed the user can scroll down and up. Is it possible to disable scrolling during the time this loading screen is shown? I'm using it as a GIF animation intro to my page, so I don't want them to be able to scroll while it loads.

Add to Page Settings > Advanced > Header

<script>
$(window).load(function() {
    $('body').css('overflow', 'hidden');
    setTimeout( function() {
        $('body').css('overflow', 'initial');
    }, 5000);
});
</script>

TOMweb · November 1, 2020

This thread is super useful. Thank you!! @victpo was @tuanphan's code successful for you? When I try to insert it in Code Injection of the page, this doesn't work for me. Any luck on your end?

Take care

tuanphan · November 2, 2020

18 hours ago, TOMweb said:

This thread is super useful. Thank you!! @victpo was @tuanphan's code successful for you? When I try to insert it in Code Injection of the page, this doesn't work for me. Any luck on your end?

Take care

Try new code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(window).load(function() {
    $('body').css('overflow', 'hidden');
    setTimeout( function() {
        $('body').css('overflow', 'initial');
    }, 5000);
});
</script>

TOMweb · November 2, 2020

Still no luck for me. Here is the code I already have. I am adding your suggestion at the end but it doesn't work yet... Any idea? Thank you @tuanphan

<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: #E8E5DD;
  /* SET BACKGROUND SIZE */
  background-size: 30vh;
  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/5f0cd7575142de45f1d531a7/t/5f9ea63342433c0d82131eb5/1604232763290/animation_640_kgz2q4of.gif");
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(2500).fadeOut("slow");
})
</script>

Sera · November 2, 2020

Quote
On 10/30/2019 at 4:19 PM, tuanphan said:
@rdreed Try

Style & Script code: Page Settings > Advanced > Insert the code to Header

And insert this code to bottom of page (you can use Markdown Block or Code Block to insert)
<div class="logoload"></div>

Hi Tuanphan,

This thread has helped immensely, I'm currently attempting to do the same thing with a gif animation. I'm using the following code and there are a few things that I was hoping to do that I can't seem to adjust:

1. Ensure that the gif animation loads as a full screen animation (to the edges of the browser)
2. Only appears when user clicks on the home page

Draft Site URL:

https://tangerine-iguana-kwg3.squarespace.com/

Password: MaintainS134!

This is the code I'm currently using,

Thanks a lot in advance!

<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: 1400px;
  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/5f7cd6783ecb9850af2831b0/t/5fa032da8b26421e8cfcaf85/1604334299026/Header_Web_Gif.gif");
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(4500).fadeOut("slow");
})
</script>

Edited November 2, 2020 by Sera

temaprinter · December 29, 2020

Hi, you can replace the loader circle by simply replacing the file you can get from here http://icons8.com/preloaders

esveecee · February 13, 2021

On 11/2/2020 at 3:55 PM, Sera said:
Hi Tuanphan,

This thread has helped immensely, I'm currently attempting to do the same thing with a gif animation. I'm using the following code and there are a few things that I was hoping to do that I can't seem to adjust:

1. Ensure that the gif animation loads as a full screen animation (to the edges of the browser)
2. Only appears when user clicks on the home page

Draft Site URL:

https://tangerine-iguana-kwg3.squarespace.com/

Password: MaintainS134!

This is the code I'm currently using,

Thanks a lot in advance!
<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: 1400px;
  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/5f7cd6783ecb9850af2831b0/t/5fa032da8b26421e8cfcaf85/1604334299026/Header_Web_Gif.gif");
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(4500).fadeOut("slow");
})
</script>

I don't know if you've solved this yet but you need to add the code to your homepage header

Pages > Gear Icon > Advanced > Add there .

This will ensure it loads only on the homepage.

esveecee · February 13, 2021

@tuanphan Hey Tuan, thanks for helping us all.

I have the preloader and I'd like to make it responsive on mobile. I've tried to add a media query but it doesn't do what I thought it would. This is the active code on my site. I am using Brine and it is in the Advanced panel of the Index Settings. I hope I can get your help, thanks!

<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: 600px;
  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/5fd687dc674bc6778f41a678/t/60275afab391045d0b964861/1613191930385/sigh+copy.gif");
}
</style>

<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(5000).fadeOut("slow");
})
</script>

<script>
$(window).load(function() {
    $('body').css('overflow', 'hidden');
    setTimeout( function() {
        $('body').css('overflow', 'initial');
    }, 5000);
});
</script>

ruthob93 · April 19, 2021

Hi everyone,

I'm using this code but for some reason not getting a loading page to appear at all. I tried it in the general code injection, but now have it placed directly in the home page under pages > gear icon > advanced. Neither has worked! Any help greatly appreciated! My URL is www.tandemcraft.com

Thanks!

tuanphan · April 21, 2021

On 4/19/2021 at 3:24 PM, ruthob93 said:

Hi everyone,

I'm using this code but for some reason not getting a loading page to appear at all. I tried it in the general code injection, but now have it placed directly in the home page under pages > gear icon > advanced. Neither has worked! Any help greatly appreciated! My URL is www.tandemcraft.com

Thanks!

Hi. Do you still need help?

ruthob93 · June 24, 2021

@tuanphan Sorry I didn't see your response before. I still can't get it to work! If you can help I would be so grateful!

tuanphan · June 28, 2021

On 6/24/2021 at 7:07 PM, ruthob93 said:

@tuanphan Sorry I didn't see your response before. I still can't get it to work! If you can help I would be so grateful!

Hi. I see it worked here.

https://www.tandemcraft.com/

ruthob93 · July 1, 2021

@tuanphan Yes, I finally got it working after months! But I have one more problem and I would be soooo grateful if you can help!

I have my logo centered in the header but the alignment is off - On mobile it is off line to the left and on desktop it is off to the right. I've searched the forum but can't find a solution.. If you could take a look I'd be so grateful! Thanks!

tuanphan · July 2, 2021

22 hours ago, ruthob93 said:

@tuanphan Yes, I finally got it working after months! But I have one more problem and I would be soooo grateful if you can help!

I have my logo centered in the header but the alignment is off - On mobile it is off line to the left and on desktop it is off to the right. I've searched the forum but can't find a solution.. If you could take a look I'd be so grateful! Thanks!

Actually I see it is center. Can you take a screenshot & explain in more detail?

SanchezisFine · September 7, 2021

Hi, I'm trying to use the code in the Advanced > Code Injection and it's working fine, but It keeps loading on every page, and I want it to load only once per session (or rather, once per refresh). What do I have to add to the code for that to happen? This is the code I'm using:

<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: #000;
  /* 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://images.squarespace-cdn.com/content/v1/60be9e992b75737ce066e885/221189ce-34d5-48cf-a780-3de3fd6eb732/SIF_Logo_Red.png");
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(600).fadeOut("slow");
})
</script>

Thanks in advance.

Victoria916 · September 28, 2021

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

Logo loading screen - code adjustment please

Question

Link to comment

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

tuanphan

rdreed

tuanphan

Posted Images

32 answers to this question

Recommended Posts

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

Support

Community

Developers

Resources