Add a nice pre-loading page on your wordpress site
August 20, 2018
While I was checking out more about three.js (an external javascript file allowing users to construct any awesome 3D works on their web pages using javascript), I found a topic talking about the loading screen:
https://stackoverflow.com/questions/49643660/threejs-loading-screen
The loading screen I picked is from here:
https://jsfiddle.net/vfug1adn/19/
https://freefrontend.com/css-loaders/ (Many awesome loaders can be found here as well)
I think it is a pretty awesome design, hopefully the owner wouldn’t mind that… 🙂
How to apply these loaders to WordPress Site?
- Add a new plugin
- Search for “WP Smart Preloader” -> “Install Now” -> And don’t forget to “ACTIVATE”
- Once it is activated, you can see the preloader from “Settings” on the admin dashboard
- In WP Smart Preloader, choose “Custom Animation”
“Show only on Home Page” indicates whether the pre-loader applies to ALL webpages or only when HOME PAGE is loading in progress.
You can use the default preloader here as well
- Apply the css codes & html codes as below:
HTML:
<div id=”loader”></div>
</section>
CSS:
#loading-screen {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #111111;
opacity: 1;
transition: 1s opacity;
}
#loading-screen.fade-out {
opacity: 0;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #9370DB;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#loader:before {
content: “”;
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #BA55D3;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#loader:after {
content: “”;
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FF00FF;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
An awesome pre-loader will then be set to your wordpress site, as simple as that! 🙂