How to apply a preloader on Wix Site?

Ask the community
,
1

I am using free version of Wix site development, and when i take the site on my mobile before site loading there is a blank white screen before the site is loaded on the screen.
Is there any function to apply a preloader in our site?
When i searched on the forum, there is an option to add custom preloader script in tracking analytic section. Is there any option to add a preloader using the free version?
Thanks in advance

2

Hello

Here’s an example of how to build your pre loader using WixCode : https://www.wix.com/code/home/example/Preloader

Best
Massa

3

Hi All,

Here’s another example , but instead of adding the preloader to your page code, you can add it to your website header code. It will load the preloader before your pages load.

Cheers,
Ben

4

Inseri o código abaixo e funcionou porém não acompanha a rolagem da página. Alguém sabe como aterar isso? Para acompanhar a rolagem da página?

.sk-folding-cube { height: 2em; width: 2em; overflow: show; margin: auto; top: 0; left: 0; bottom: 0; right: 0; width: 40px; height: 40px; text-align: center; position: absolute; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .sk-folding-cube .sk-cube { float: left; width: 50%; height: 50%; position: relative; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .sk-folding-cube .sk-cube:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; animation: sk-foldCubeAngle 2.4s infinite linear both; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; } .sk-folding-cube .sk-cube2 { -webkit-transform: scale(1.1) rotateZ(90deg); transform: scale(1.1) rotateZ(90deg); } .sk-folding-cube .sk-cube3 { -webkit-transform: scale(1.1) rotateZ(180deg); transform: scale(1.1) rotateZ(180deg); } .sk-folding-cube .sk-cube4 { -webkit-transform: scale(1.1) rotateZ(270deg); transform: scale(1.1) rotateZ(270deg); } .sk-folding-cube .sk-cube2:before { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .sk-folding-cube .sk-cube3:before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .sk-folding-cube .sk-cube4:before { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } @-webkit-keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } } @keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } }
5

i also want to add preloader on my website https://www.therecipespk.com /, i tried everything but failed please help me.

6

Este código de cima funciona mas não acompanha a rolagem da página. Vá até Confirurações…Visão Geral…Análise do site…Nova Ferramenta…Personalizada…Copie e cole o código acima…selecione carregue o código em cada nova página…e Body_FIM . Pronto. Publique o site que funcionará.

7

Simply search the forum and you will find an excellent old post about it.
https://www.wix.com/corvid/forum/community-discussion/real-preloader-on-a-wix-website/

8

All forum posts must be in ENGLISH.
Please follow the forum guidelines.

9

All forum posts must be in ENGLISH.
Please follow the forum guidelines.

10

This is currently a feature request: Studio Editor Request: Adding a Preloading Screen