Having trouble with your website? Is it displaying a broken html with no styles but then after a few moments, the styles are there? Or do you simply want to display something while your website is still loading?
Good gracious! You came to the right place! charot! But yes, Today, I will be discussing what a preloader is, why we sometimes need it, and what are its benefits.
A preloader, as its name imply, is something that is displayed before showing the actual content.
Like for example, in my case, every time you visit a page in my site or click a button to go somewhere, a “PLEASE WAIT…” text is shown.
There’s also a moving circular stuff below the text. I added this preloader because… hmmm… no reason actually, it looks better, I guess. LOL.
There are multiple plugins that can create preloaders for your site. I honestly do not know any so I created mine.
Broken HTML?
What about those that display a broken HTML site and after a few seconds, the site would show the styled version?
The most probable reason for this is that there are code errors in your site. For WordPress sites, before you resort to using a preloader, do these first:
- Check your code structure: If you are using your own customized theme, recheck if you are missing any special characters.
- Disable plugins: Disable them one by one, after disabling one, check if the broken html is still there. If you find a faulty plugin, either replace it with a different plugin, or contact the plugin developer.
- Disable theme: If you are not using your own customized theme, try disabling the current theme that you have and use the default or recommended theme of WordPress.
For some reasons, a broken HTML is due to an ongoing maintenance on the site. If that’s the case… continue reading.
Some Solutions
I have here pure css examples on how to create your custom preloader.
The example below can be used if your external style sheet ( .css file ) is working perfectly. Remember to add the code right after the < body > tag. This is to ensure that the code will run before anything else within the body content.
<body>
<div class="awc-preloader active">
<div class="awc-loadingMsg"> Please wait... </div>
<div class="awc-loading">
<div class="awc-loading-in"></div>
</div>
</div>
</body>
However, if your style sheet is somewhat faulty and or running after all html content has been displayed, hence the broken html display, then you can try this. Here, we placed the styles inside the < head > < /head >. Make sure to have it inside those tags.
<head>
<style>
/*--- KEYFRAME ---*/
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*--- PRELOADERS ---*/
.awc-preloader {
background: rgba(43, 43, 43, 0.5);
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 199999;
display: none;
}
.awc-preloader.active {
display: block;
z-index: 99999999;
}
.awc-loadingMsg {
position: relative;
width: 100%;
text-align: center;
top: 100px;
font-size: 50px;
z-index: 2;
text-transform: uppercase;
color: #fff;
font-weight: 800;
}
.awc-loading {
text-align: center;
position: relative;
margin: auto;
top: 120px;
}
.awc-loading .awc-loading-in {
border: 5px solid #000;
border-radius: 50%;
border-top: 10px solid #ffffff;
width: 50px;
height: 50px;
left: 0;
right: 0;
margin: auto;
position: absolute;
/* CALL YOUR KEYFRAME */
-webkit-animation: spinner 2s linear infinite;
animation: spinner 2s linear infinite;
}
</style>
</head>
<body>
<div class="awc-preloader active">
<div class="awc-loadingMsg"> Please wait... </div>
<div class="awc-loading">
<div class="awc-loading-in"></div>
</div>
</div>
</body>
The code above simply placed the codes from the style sheet ( .css file ) to your .html or .php file.
The results are the same. Duh! haha. But you get the gist of it. I recommend using the first code example, but both actually works. You just have to be creative about it.
How To Remove It
You have multiple ways to remove the preloader. Based on my examples above, you can see the first div container having “awc-preloader active” as its classes. Now you simply have to remove the “active” to disable the preloader.
How do you do that, it’s simple. We use a little bit of script. I will be using jQuery for this example, but you can use JavaScript if you are more comfortable with it.
Now, if you want a user to click something to remove the preloader, get the class name of your button and try to use the code below.
(function($) {
$('.your-button-classname').click(function() {
$('.awc-preloader').addClass('active');
})
}(jQuery));
If you want however to remove the loader once your site has loaded. Use the code below.
(function($) {
/*
IF YOU WANT YOUR PRElOADER TO BE REMOVED
WHEN YOUR CONTENT ARE READY
*/
$(document).ready(function(){
$('.awc-preloader').removeClass('active');
})
/*
IF YOU WANT YOUR PRElOADER TO BE REMOVED
WHEN THE PAGE HAS LOADED COMPLETELY
*/
$(window).load(function(){
$('.awc-preloader').removeClass('active');
})
}(jQuery));
Anything that takes your interest. I would suggest however to have or make it appropriate and complimentary to your website.
Either way a preloader should not be used to hide code errors or any errors at your website. It can hide them from the eyes of your visitors, but it doesn’t change the fact that there are errors in your site. This may cause you some issues in the future.
Good Luck !!! May the odds be always in your favor. And remember, if you need help in any way, I’m here for you. Toodles!
That’s all for this post. If you think this article is informative and or interesting, please share it with your fwends. hihi
Also, if you have any suggestions or comments regarding this article or if you have any topics you’d like to ask, comment it down below. Let’s be friends! haha
#hostinger #awc #workathome #staysafe #business
Some additional
This might be a little off topic, but if you are building your own website or you are building for someone else and you need a hosting provider, I would like to recommend Hostinger! If you want to know my reason for my recommendation, check my article here.
0 Comments