Preloader

Discussion Ask a question
,
1

Hello guys,
I’m build myself a website and I just can’t figure out how to do Preloader that fits my needs.

I got this code somewhere, which I’m applying in the Wix Tracking Tools in the Dashboard but whatever I try I can’t apply a white background to the overlay and I want to change the loading Gif too. Can you guys help me? I’m at boiling temperature by now just because of this.

/* Absolute Center Spinner */ .loading { position: absolute; height: 2em; width: 2em; overflow: show; margin: auto; top: 0; left: 0; bottom: 0; right: 0; } .loading:before { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); } /* :not(:required) hides these rules from IE9 and below */ .loading:not(:required) { /* hide "loading..." text */ font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } .loading:not(:required):after { content: ''; display: block; font-size: 10px; width: 1em; height: 1em; margin-top: -0.5em; -webkit-animation: spinner 1500ms infinite linear; -moz-animation: spinner 1500ms infinite linear; -ms-animation: spinner 1500ms infinite linear; -o-animation: spinner 1500ms infinite linear; animation: spinner 1500ms infinite linear; border-radius: 0.5em; -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0; box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0; } /* Animation */ @-webkit-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }
2

Hi,
I found this video tutorial which can be useful for this.

Good luck,
Tal.

3

Hi Tal,
I have watched your video and I have implemented it to my site. The preloader is not loading based on the site loading. It just load for time interval and it displays the site. But site taking additional time to load the image, animation etc.
Note:
Everything should load and than the preloader should disable. That’s what I need. Can you please help me on this ?

4

Hi All,
I found a code for a preloader that loads and disables based on site loading. Hopefully it helps.
Good luck!
Ben

5

great solution is there a way to put it on the free wix site?

6

And for a specific element?

7

To add a preloader BETWEEN PAGES to show when website is full loaded and you are navigating using the navigation menu, add this to the body-end in your tracking tools in wix dashboard to load on every page:

< div class = “spinner-between-pages” id = “preloaderBetweenPages” >
< div class = “double-bounce1-between-pages” ></ div >
< div class = “double-bounce2-between-pages” ></ div >
</ div >

< style >
.spinner-between-pages {
display : none ;
z-index : 99 ;
position : fixed ;
height : 2em ;
width : 2em ;
overflow : show ;
margin : auto ;
top : 0 ;
left : 0 ;
bottom : 0 ;
right : 0 ;
text-align : center ;
width : 40px ;
height : 40px ;
}

.double-bounce1-between-pages , .double-bounce2-between-pages {
width : 100% ;
height : 100% ;
border-radius : 50% ;
background-color : #23914d ;
opacity : 0.6 ;
position : absolute ;
top : 0 ; left : 0 ;
-webkit-animation : sk-bounce-between-pages 2.0s infinite ease-in-out ;
animation : sk-bounce-between-pages 2.0s infinite ease-in-out ;
}

.double-bounce2-between-pages {
-webkit-animation-delay : -1.0s ;
animation-delay : -1.0s ;
}

@-webkit-keyframes sk-bounce-between-pages {
0%, 100% {
-webkit-transform : scale ( 0.0 )
}
50% {
-webkit-transform : scale ( 1.0 )
}
}

@keyframes sk-bounce-between-pages {
0%, 100% {
transform : scale ( 0.0 );
-webkit-transform : scale ( 0.0 );
}
50% {
transform : scale ( 1.0 );
-webkit-transform : scale ( 1.0 );
}
}
</ style >

< script type = “text/javascript” >

if (!!( document . getElementById ( “comp-kjbocjmcitemsContainer” ))){
document . getElementById ( “comp-kjbocjmcitemsContainer” ). addEventListener ( “click” , () => {
console . log ( “Navigation menu clicked!!!” );
var preload = document . getElementById ( “preloaderBetweenPages” );
preload . style . display = “block” ;
( function (){
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” ;
preload . style . display = “none” ;
}}}})();
});
}

if (!!( document . getElementById ( “comp-t85mur39” ))){
document . getElementById ( “comp-t85mur39” ). addEventListener ( “click” , () => {
console . log ( “Navigation menu clicked!!!” );
var preload = document . getElementById ( “preloaderBetweenPages” );
preload . style . display = “block” ;
( function (){
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” ;
preload . style . display = “none” ;
}}}})();
});
}
</ script >

This way you can give your visitors some indication when they have clicked to navigate to a new page, otherwise, the site just stays static until the page loads which is misleading that your action has not been executed.