IT9 FELIX blog

Add a nice pre-loading page on your wordpress site

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?

  1. Add a new plugin
  2. Search for “WP Smart Preloader” -> “Install Now” -> And don’t forget to “ACTIVATE
  3. Once it is activated, you can see the preloader from “Settings” on the admin dashboard
  4. 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
  5. Apply the css codes & html codes as below:

HTML:

<section id=”loading-screen”>
 <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! 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *