So…I really like the loader page for mobile and know that currently, the only way to achieve this on desktop sites is via Corvid…which is fine. My questions are to see what the rest of you think of them and if you use them on your site?
1 Like
Good question. Maybe @roberthamilton might be able to provide his insight. I know he uses Corvid a lot!
1 Like
Hey Shannon,
Firstly, you can actually achieve this easier than you think by not using corvid. I recommend you check out this tool > https://futurevisionweb.wixsite.com/futurecodemain/preloader-tool - a partner built it and it allows you to pick a loader icon, add a hex code for the icon and the background colour of the screen and it will output a script you can add to the Tracking & Analytics section of the Wix Dashboard.
The script would look something like this:
<body bgcolor=#FFFFFF></body><center><div class="spinner" id="preloader"></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;text-align: center; width: 40px; height: 40px; background-color: #FF5733; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out;}@-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }}@keyframes sk-rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); }}/style>
Steps to install the code can be found inside the website above where you would create your preloader.
Secondly, I feel that these should be used ONLY if your site is slow at rendering. If you do not have these issues, what’s the point? Just let the people get to the site without any real wait.
1 Like