Page Transition Bar

You've probably noticed how a lot of WP and custom coded sites have a page loading bar these days. If you don't know what I'm talking about check out Youtube.com, which has this feature for their navigation. It's pretty cool right?

I'm sure you don't want your site being left behind by WP and custom coded competitors because of a small feature, so today I'm going to show you how to create this feature on your Wix.com website.

What you'll need:

• 1x progressBar

• Corvid

What you need to do:

• Enable Corvid.

• Add a progress bar element to the header of your site, stretch it to the full width.

• Set the progress bars background to transparent.

• Set the progress bars value background to whatever color you want.

• Set the progress bars value to 100.

• Name the progress bar, through the properties panel, "pageLoader".

• Copy and paste the below code into the site tab of the code editor.

import wixLocation from 'wix-location';

$w.onReady(() => {
wixLocation.onChange(pageChange())
function pageChange(event) {
$w('#pageLoader').value = 0
$w('#pageLoader').show()
pageChangeI(event)
}
function pageChangePI(event) {
setTimeout(() => {
$w('#pageLoader').value = 10
pageChangeI(event)
}, 200)
}
function pageChangeI(event) {
setTimeout(() => {
$w('#pageLoader').value = 20
pageChangeII(event)
}, 200)
}
function pageChangeII(event) {
setTimeout(() => {
$w('#pageLoader').value = 30
pageChangeIII(event)
}, 200)
}
function pageChangeIII(event) {
setTimeout(() => {
$w('#pageLoader').value = 40
pageChangeIV(event)
}, 200)
}
function pageChangeIV(event) {
setTimeout(() => {
$w('#pageLoader').value = 50
pageChangeV(event)
}, 200)
}
function pageChangeV(event) {
setTimeout(() => {
$w('#pageLoader').value = 60
pageChangeVI(event)
}, 200)
}
function pageChangeVI(event) {
setTimeout(() => {
$w('#pageLoader').value = 70
pageChangeVII(event)
}, 200)
}
function pageChangeVII(event) {
setTimeout(() => {
$w('#pageLoader').value = 80
pageChangeVIII(event)
}, 200)
}
function pageChangeVIII(event) {
setTimeout(() => {
$w('#pageLoader').value = 90
pageChangeIX(event)
}, 200)
}
function pageChangeIX(event) {
setTimeout(() => {
$w('#pageLoader').value = 100
pageChangeX(event)
}, 200)
}
function pageChangeX(event) {
setTimeout(() => {
$w('#pageLoader').hide()
}, 200)
}
});
});

That's it. You're done!