Vorbly Code | WIX CODE HTML PRELOADER

Vorbly <Code>

CODING MADE EASY WITH VORBLY

WIX CODE HTML PRELOADER

Need to add a preloader to your Wix website? This tutorial will show you how to create a preloader for your Wix website using HTML. Show a preloader while your webpages load and reduce bounce rates. We will provide you with the webpage elements and sample codes required to implement this feature.

THE DEMO

1/3

THE ELEMENTS

The Page

None.

THE CODE

Tracking Tools & Analytics

Go to Wix Dashboard > Manage Website > Tracking & Analytics > Add New Tool > </> Custom

 

// Add Code //

<div class="spinner" id="preloader">

<div class="bounce1"></div>

<div class="bounce2"></div>

<div class="bounce3"></div>

</div>

<script type="text/javascript">

(function(){

var preload = document.getElementById("preloader");

var loading = 0;

var id = setInterval(frame, 64);

function frame(){

if(loading == 100){

clearInterval(id);

} else {

loading = loading + 1;

if(loading == 90){

preload.style.opacity = "0";

}

}

}

})();

</script>

<style>

.spinner {

position: absolute;

height: 2em;

width: 2em;

overflow: show;

margin: auto;

top: 0;

left: 0;

bottom: 0;

right: 0;

width: 70px;

text-align: center;

}

.spinner > div {

width: 18px;

height: 18px;

background-color: #000000;

border-radius: 100%;

display: inline-block;

-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;

animation: sk-bouncedelay 1.4s infinite ease-in-out both;

}

.spinner .bounce1 {

-webkit-animation-delay: -0.32s;

animation-delay: -0.32s;

}

.spinner .bounce2 {

-webkit-animation-delay: -0.16s;

animation-delay: -0.16s;

}

@-webkit-keyframes sk-bouncedelay {

0%, 80%, 100% { -webkit-transform: scale(0) }

40% { -webkit-transform: scale(1.0) }

}

@keyframes sk-bouncedelay {

0%, 80%, 100% {

-webkit-transform: scale(0);

transform: scale(0);

} 40% {

-webkit-transform: scale(1.0);

transform: scale(1.0);

}

}

</style>

COMMENTS

I'm a paragraph. Click here to add your own text and edit me. It's easy.

No comments. Be the first to leave a comment.

Perfect, the best solution for a preloader. Thank you.

Andrea Daniels

Dec 31, 2018

8

You are most welcome Andrea! Glad you found our solution useful.

Ben (Vorbly)

Dec 31, 2018

3

How could I add my company logo to the preloader?Tried adding to the html an image from src but it destroys the layout of the actual website

mel

Jan 25, 2019

3

Hi Mel,

When working in a closed environment like Wix, changing the header code can be tricky and might affect your page code.

If you are looking for a custom preloader, the simplest way is to implement the preloader on your site or page code directly. Wix has created a tutorial for this, www.wix.com/code/home/example/Preloader.

However, the limitation of this solution is that the preloader isn't an actual preloader. It does not wait for your page to complete loading. Instead, you will need to setTimeout (or delay) manually for the preloader (e.g. 1500 / 1.5 secs).

Please feel free to contact us if you have any further queries. Thank you!

Andrew (Vorbly)

Jan 25, 2019

3

Thank you for your reply.
I have tried the wix code and many other solutions,somehow this is not over passing the wix "limitations"

mel

Jan 26, 2019

2

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP