CSS3 Preloader Code Not Showing Background Color
Question
I am using CSS3 Designed Preloader for my website.
#preloader { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @-webkit-keyframes moveup { 0%, 60%, 100% { -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0); transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0); } 25% { -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em); transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em); } } @keyframes moveup { 0%, 60%, 100% { -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0); transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0); } 25% { -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em); transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em); } } @-webkit-keyframes movedown { 0%, 60%, 100% { -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0); transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0); } 25% { -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em); transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em); } } @keyframes movedown { 0%, 60%, 100% { -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0); transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0); } 25% { -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em); transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em); } } .layer { display: block; position: absolute; height: 3em; width: 3em; box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2); -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg); transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg); } .layer:nth-of-type(1) { background: #534a47; margin-top: 1.5em; -webkit-animation: movedown 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.9s infinite normal; animation: movedown 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.9s infinite normal; } .layer:nth-of-type(1):before { content: ''; position: absolute; width: 85%; height: 85%; background: #37332f; } .layer:nth-of-type(2) { background: #5a96bc; margin-top: 0.75em; } .layer:nth-of-type(3) { background: rgba(255, 255, 255, 0.6); -webkit-animation: moveup 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal; animation: moveup 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal; }
<!DOCTYPE html> <html class="no-js" lang="en"> <head> </head> <body> <!-- THEME PRELOADER AREA --> <div id="preloader"> <i class='layer'></i> <i class='layer'></i> <i class='layer'></i> </div> <div class="wrapper"> Hi this is a demo content </div> </body> </html>
The problem I'm facing with this code is that the preloader is being visible on site load with the contents that are in HTML.
ie I want the preloader with background white so that whatever the HTML page is loading it's not visible. In the current scenario, the preloader is also visible and the background HTML page is also visible. I want to hide the background image page by giving the prealoder div a background colour so that it does not show anything behind.
Can anyone help me out with this?
I have the JS Code written to remove the preloader one the page is loaded. The only thing I am stuck at is that the visibility of the background contents while loading.
3 answers
solution1
1 2019-01-21 05:31:40
Add a wrapper out of #preloader positioned fixed. give it a background-color and you're done!
.preloader-main { position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transform: none; width: 100%; height: 100%; background: #FFF; } #preloader { position: absolute; top: 0; left: 0;; right: 0; bottom: 0; margin: auto; height: 3em; width: 3em; } @-webkit-keyframes moveup { 0%, 60%, 100% { -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0); transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0); } 25% { -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em); transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em); } } @keyframes moveup { 0%, 60%, 100% { -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0); transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0); } 25% { -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em); transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em); } } @-webkit-keyframes movedown { 0%, 60%, 100% { -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0); transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0); } 25% { -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em); transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em); } } @keyframes movedown { 0%, 60%, 100% { -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0); transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0); } 25% { -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em); transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em); } } .layer { display: block; position: absolute; height: 3em; width: 3em; box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2); -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg); transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg); } .layer:nth-of-type(1) { background: #534a47; margin-top: 1.5em; -webkit-animation: movedown 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.9s infinite normal; animation: movedown 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.9s infinite normal; } .layer:nth-of-type(1):before { content: ''; position: absolute; width: 85%; height: 85%; background: #37332f; } .layer:nth-of-type(2) { background: #5a96bc; margin-top: 0.75em; } .layer:nth-of-type(3) { background: rgba(255, 255, 255, 0.6); -webkit-animation: moveup 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal; animation: moveup 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal; }
<!DOCTYPE html> <html class="no-js" lang="en"> <head> </head> <body> <!-- THEME PRELOADER AREA --> <div class="preloader-main"> <div id="preloader"> <i class='layer'></i> <i class='layer'></i> <i class='layer'></i> </div> </div> Hi this is a demo content </body> </html>
solution2
0 2019-01-19 22:54:55
Hope I understand the question correctly, you can make this with simple js:
Change your html like this:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<?php include("meta_css.php"); ?>
</head>
<body>
<section>
<div id="content">Page Loaded!</div>
</section>
<div id="preloader">
<i class='layer'></i>
<i class='layer'></i>
<i class='layer'></i>
</div>
</body>
</html>
Add css for content:
#content{
display:none;
}
First, prepare FadeIn and FadeOut functions :
function fadeOutEffect(target) {
var fadeTarget = document.getElementById(target);
var fadeEffect = setInterval(function () {
if (!fadeTarget.style.opacity) {
fadeTarget.style.opacity = 1;
}
if (fadeTarget.style.opacity > 0) {
fadeTarget.style.opacity -= 0.1;
}else {
clearInterval(fadeEffect);
fadeTarget.style.display="none";
}
}, 40);
}
function fadeInEffect(target) {
var fadeTarget = document.getElementById(target);
fadeTarget.style.display="block";
var fadeEffect = setInterval(function () {
if (!fadeTarget.style.opacity) {
fadeTarget.style.opacity = 0.1;
}
if (fadeTarget.style.opacity < 1) {
fadeTarget.style.opacity=parseFloat(fadeTarget.style.opacity) + 0.1;
}else {
clearInterval(fadeEffect);
}
}, 40);
}
Then, add this to your onLoad
fadeOutEffect("preloader");
fadeInEffect("content");
Here is working fiddle
solution3
0 2019-01-20 09:44:59
The background color must be set on the preloader element, but it has no dimension.
Set it to 100% width and height to cover all the screen, and remove the style to make it centered, they are no longer needed.
Now, we need to center the layer elements inside the preload. Do this using left and top 50%.
As a side note, webkit prefixes aren't needed anymore.
#preloader { position: absolute; background-color: yellow; width: 100%; height: 100%; } @keyframes moveup { 0%, 60%, 100% { transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0); } 25% { transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em); } } @keyframes movedown { 0%, 60%, 100% { transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0); } 25% { transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em); } } .layer { display: block; position: absolute; height: 3em; width: 3em; box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2); transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg); left: 50%; top: 50%; } .layer:nth-of-type(1) { background: #534a47; margin-top: 1.5em; animation: movedown 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.9s infinite normal; } .layer:nth-of-type(1):before { content: ''; position: absolute; width: 85%; height: 85%; background: #37332f; } .layer:nth-of-type(2) { background: #5a96bc; margin-top: 0.75em; } .layer:nth-of-type(3) { background: rgba(255, 255, 255, 0.6); animation: moveup 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal; }
<div id="preloader"> <i class='layer'></i> <i class='layer'></i> <i class='layer'></i> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
change the background color in CSS3
how to hidden the background color using css3
Diagonal CSS3 Background Color/Images
css3 triangle without background color
CSS3: Transition of background color to transparent
CSS3 keep background color transitions the same
background color in css not showing up
CSS background color not showing up?
css - div background color not showing
transition between background color and background image CSS3
Related Tags