Hi,
I want to add a preloader to my website. Wix Code offers this in Resources> Examples. I gave a web programmer to try to do it (not sure he used wix code) but he couldn’t do it.
Has anyone managed to do it? did it work with the way Wix Code showed it will work?
this is the example- https://www.wix.com/code/home/example/Preloader
Would love to see examples of sites with preloaders and any insight you have about this issue.
Thank you,
Renana
Well the sample is just showing an effect, putting a pre-loader in the onReady function doesn’t show it until all elements are loaded. You want to add a pre-loader when page starts to load and then hide it when the page is loaded I guess.
Understood correctly?
What does WIX staff say about pre-loaders?
Thank you for your response. I want to do exactly what you said. I don’t know what wix staff say about pre-loaders using Wix Code, but I do know that it was impossible to add a pre-loader BEFORE Wix Code was developed (https://support.wix.com/en/article/request-customizable-loading-screen-for-your-desktop-site).
I did find this page as well- https://dev.wix.com/docs/ui_component/preloader/
but I’m not sure what it means.
Hello, I link to this discussion because I’m looking for this feature on my site. So I’m waiting for some solution, too
Hi,
We currently have a bug where setInterval() and setTimeout() produce an error in the IDE.
Nonetheless the code should work as expected.
ok so this may have already been asked, and I did it once before but im hoping someone can guide me with this… so A while ago i had an awesome preloader with this set of html:
Something cool is about to begin
and this CSS:
body{
background:#111;
color:#ddd;
font-weight:300;
font-family: ‘Source Sans Pro’, sans-serif;
}
body > .container{
position:relative;
width:100%;
height:100%;
z-index:40;
}
}
body::before{
background-size:100% 100%;
height:1px;
top:1px;
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.74) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(25%,rgba(255,255,255,0.74)), color-stop(50%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.74) 25%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.74) 25%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.74) 25%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.74) 25%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 100%);
}
.loader{
position:absolute;
width:320px;
height:240px;
left:50%;
top:50%;
margin-left:-160px;
margin-top:-120px;
border-radius:4px;
transition:opacity 400ms;
}
@keyframes pulse{
0%{
height:0%;
box-shadow:0 0 4px rgba(0,0,0,1.0);
}
20%{
background:rgba(255,255,255,0.5);
height:100%;
box-shadow:0 0 8px rgba(255,255,255,0.0);
}
50%{
background:rgba(17,217,255,1);
box-shadow:0 0 8px rgba(17,217,255,0.8);
}
80%{
background:rgba(255,255,255,0.5);
height:100%;
box-shadow:0 0 8px rgba(255,255,255,0.0);
}
100%{
height:0%;
box-shadow:0 0 4px rgba(0,0,0,1.0);
}
}
.loader > ul{
list-style:none;
position:absolute;
width:120px;
height:120px;
left:50%;
top:50%;
margin:-60px -80px;
}
.loader li{
width:4px;
height:30px;
border-radius:2px;
background:#050505;
position:absolute;
left:50%;
top:10px;
margin-left:-2px;
transform-origin:2px 50px;
box-shadow:1px 0 0 rgba(255,255,255,0.1);
}
.loader li div{
border-radius:2px;
width:4px;
background:rgba(255,255,255,0.5);
position:absolute;
bottom:0px;
left:0px;
animation:pulse 6s normal infinite;
}
ul>li:nth-of-type(1){
transform:rotate(0deg);
box-shadow:0 1px 0 rgba(255,255,255,0.1);
}
ul>li:nth-of-type(1)>div{
animation-delay:100ms;
}
ul>li:nth-of-type(2){
transform:rotate(30deg);
}
ul>li:nth-of-type(2)>div{
animation-delay:200ms;
}
ul>li:nth-of-type(3){
transform:rotate(60deg);
}
ul>li:nth-of-type(3)>div{
animation-delay:300ms;
}
ul>li:nth-of-type(4){
transform:rotate(90deg);
}
ul>li:nth-of-type(4)>div{
animation-delay:400ms;
}
ul>li:nth-of-type(5){
transform:rotate(120deg);
}
ul>li:nth-of-type(5)>div{
animation-delay:500ms;
}
ul>li:nth-of-type(6){
transform:rotate(150deg);
}
ul>li:nth-of-type(6)>div{
animation-delay:600ms;
}
ul>li:nth-of-type(7){
transform:rotate(180deg);
box-shadow:0 -1px 0 rgba(255,255,255,0.1);
}
ul>li:nth-of-type(7)>div{
animation-delay:700ms;
}
ul>li:nth-of-type(8){
transform:rotate(210deg);
box-shadow:-1px 0 0 rgba(255,255,255,0.1);
}
ul>li:nth-of-type(8)>div{
animation-delay:800ms;
}
ul>li:nth-of-type(9){
transform:rotate(240deg);
box-shadow:-1px 0 0 rgba(255,255,255,0.1);
}
ul>li:nth-of-type(9)>div{
animation-delay:900ms;
}
ul>li:nth-of-type(10){
transform:rotate(270deg);
box-shadow:-1px 0 0 rgba(255,255,255,0.1);
}
ul>li:nth-of-type(10)>div{
animation-delay:1000ms;
}
ul>li:nth-of-type(11){
transform:rotate(300deg);
box-shadow:-1px 0 0 rgba(255,255,255,0.1);
}
ul>li:nth-of-type(11)>div{
animation-delay:1100ms;
}
ul>li:nth-of-type(12){
transform:rotate(330deg);
box-shadow:-1px 0 0 rgba(255,255,255,0.1);
}
ul>li:nth-of-type(12)>div{
animation-delay:1200ms;
}
.loader{
background: rgb(5,5,5);
background: -moz-linear-gradient(45deg, rgba(5,5,5,1) 0%, rgba(16,16,16,1) 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(5,5,5,1)), color-stop(100%,rgba(16,16,16,1)));
background: -webkit-linear-gradient(45deg, rgba(5,5,5,1) 0%,rgba(16,16,16,1) 100%);
background: -o-linear-gradient(45deg, rgba(5,5,5,1) 0%,rgba(16,16,16,1) 100%);
background: -ms-linear-gradient(45deg, rgba(5,5,5,1) 0%,rgba(16,16,16,1) 100%);
background: linear-gradient(45deg, rgba(5,5,5,1) 0%,rgba(16,16,16,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#050505’, endColorstr=‘#101010’,GradientType=1 );
position:absolute;
width:320px;
height:240px;
left:50%;
top:50%;
margin-left:-160px;
margin-top:-120px;
border-radius:4px;
box-shadow:0 0 4px 0px rgba(0,0,0,0.6),inset 0px 1px 0px #000,inset 0px -1px 0px #000,inset 1px 0px 0px #000,inset -1px 0px 0px #000;
}
.loader::after{
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 49%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.02) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.03)), color-stop(49%,rgba(255,255,255,0.03)), color-stop(50%,rgba(255,255,255,0.02)), color-stop(100%,rgba(255,255,255,0.02)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.03) 0%,rgba(255,255,255,0.03) 49%,rgba(255,255,255,0.02) 50%,rgba(255,255,255,0.02) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.03) 0%,rgba(255,255,255,0.03) 49%,rgba(255,255,255,0.02) 50%,rgba(255,255,255,0.02) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.03) 0%,rgba(255,255,255,0.03) 49%,rgba(255,255,255,0.02) 50%,rgba(255,255,255,0.02) 100%);
background: radial-gradient(ellipse at center, rgba(255,255,255,0.03) 0%,rgba(255,255,255,0.03) 49%,rgba(255,255,255,0.02) 50%,rgba(255,255,255,0.02) 100%);
position:absolute;
width:100%;
height:100%;
background-size:200% 240%;
top:0px;
left:0px;
z-index:4;
content:’ ';
}
.loader h4{
text-align:center;
width:100%;
position:absolute;
bottom:0px;
font-family:‘Source Sans’,sans-serif;
font-weight:300;
}
How do I add CSS and HTML into Wix?
I did it once before on an old site…but I cannot remember for the life of me remember how to do this again…again I apologize for the super long read…
Use a iFrame or add it as a new custom tool in tracking and analytics.
See this previous post for a good example.
https://www.wix.com/corvid/forum/community-discussion/real-preloader-on-a-wix-website
Old post being closed.