Hello, the same problem was there before, but I can not find a solution. All permissions are correct - I think - but the data is not displayed.
Dear Wix team can you please help me.
The mobile version takes an extremely long time to load. I have tested it with different tools. Is it due to the JS scripts. The site is very small ....
I do not want to lose users and customers!
Help me!!
Regards Phil
Now I found a solution to use a modified preloader and I dont lose any costumer anymore ... thanks Reverseweb:
https://www.wix.com/code/home/forum/show-off-your-work/real-preloader-on-a-wix-website
I modified the code a bit to use my own icon.
<style>
#site {
opacity: 0;
-webkit-transition: all 2s ease;
transition: all 2s ease;
}
#preloader {
height: 60px;
width: 60px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -20px;
}
#preloader:before {
content: "";
display: block;
position: absolute;
left: -1px;
top: -1px;
height: 100%;
width: 100%;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
border: 1px solid #1c1c1c;
border-top: 1px solid transparent;
border-radius: 100%;
}
#preloader > .icon {
position: absolute;
/*top: 50%;
left: 50%;*/
height: 60px;
width: 60px;
/*margin-top: -12.5px;
margin-left: -5.3px;*/
-webkit-animation: 1s ease-in-out infinite alternate;
animation: 1s ease-in-out infinite alternate;
}
@media only screen and (min-width: 768px) {
#preloader {
height: 80px;
width: 80px;
margin-left: -30px;
}
#preloader:before {
left: -2px;
top: -2px;
border-top-width: 2px;
border-left-width: 2px;
border-bottom-width: 2px;
border-right-width: 2px;
}
#preloader > .icon {
height: 80px;
width: 80px;
/*margin-top: -18.75px;
margin-left: -7.95px;*/
}
}
@media only screen and (min-width: 1200px) {
#preloader {
height: 100px;
width: 100px;
margin-top: -40px;
margin-left: -40px;
}
#preloader > .icon {
height: 100px;
width: 100px;
/*margin-top: -25px;
margin-left: -10.6px;*/
}
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes rotation {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-webkit-keyframes wink {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes wink {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
<div id="preloader" aria-busy="true" aria-label="Loading, please wait." role="progressbar"><img class="icon" src="https://static.wixstatic.com/media/7a9fc3_f9fad3824be94e86926cc968c9193742~mv2.png/v1/fill/w_440,h_440/7a9fc3_f9fad3824be94e86926cc968c9193742~mv2.png"> //put here your own Iconfile
</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);
//window.open('welcome.html', '_self');
} else {
loading = loading + 1;
if(loading == 90){
preload.style.opacity = "0";
}
}
}
})();
</script>
Hey your code is awesome
I want my only one gif image I dont want circle the icon and the image you have in the code
I dont know how to edit the code can you help me writing the code
i want this image URL https://static.wixstatic.com/media/9e839f_e8bed6385b8a4d52b911806c0e096078~mv2.gif