# How to set a preloading page and avoid the header temporally 

**URL:** <https://forum.wixstudio.com/t/how-to-set-a-preloading-page-and-avoid-the-header-temporally/5157>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [February 13, 2023, 1:33am UTC](https://forum.wixstudio.com/t/how-to-set-a-preloading-page-and-avoid-the-header-temporally/5157 "2023-02-13T01:33:19Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![xuy805](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/xuy805/32/36513_2.png) [@xuy805](https://forum.wixstudio.com/u/xuy805)\
**Post date:** [February 13, 2023, 1:33am UTC](https://forum.wixstudio.com/t/how-to-set-a-preloading-page-and-avoid-the-header-temporally/5157/1 "2023-02-13T01:33:19Z")

</div>

Hi, guys! I am working on setting a pre-loading page for my wix website, and I am using this code below. It works well, but I just cannot get rid of the header while it is loading. Is there a way to hide the header while it’s loading or make the loading box in front of the header?

```javascript
$w.onReady(() => {
	waitForLoading();
});

export function button6_onClick() {
	$w('#columnStrip1').show();
	waitForLoading();
}

function waitForLoading() {
	setTimeout(() => {
		$w('#columnStrip1').hide('FadeOut');
	}, 3000);
}

```

---

<div class="post-metadata">

**Author:** ![kennethtjh98](https://avatars.discourse-cdn.com/v4/letter/k/839c29/32.png) [@kennethtjh98](https://forum.wixstudio.com/u/kennethtjh98)\
**Post date:** [March 29, 2023, 9:20am UTC](https://forum.wixstudio.com/t/how-to-set-a-preloading-page-and-avoid-the-header-temporally/5157/2 "2023-03-29T09:20:28Z")

</div>

Hi I am also currently doing something like this, here is my code that worked for me:

$w . onReady ( **function** () {  
waitForLoading ();  
});

export function button6\_onClick ( ) {  
$w ( ‘#columnStrip1’ ). show ();  
waitForLoading ();  
}

**function** waitForLoading ( ) {  
setTimeout (() =\> {  
$w ( “#myLogo” ). show ( ‘FadeIn’ );  
$w ( “#navMenu” ). show ( ‘FadeIn’ );  
$w ( ‘#columnStrip1’ ). hide ( ‘FadeOut’ );  
}, 6000  
);}

in this case, #columnStrip1 is my preloading screen,  
#myLogo and #navMenu are the contents within my header.  
You have to hide your header items in the properties menu, to trigger the fade in functions for them after the timeout.

Let me know if this works for you. Cheers! 😁