Background Color Not Displaying in CSS3 Preloader Code

Utilizing a CSS3 Designed Preloader for my website with some unique keyframe animations.

#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">
       This is just a demo content placeholder.
    </div>
 </body>
</html>

The issue I'm encountering is that the preloader is displayed along with the HTML content during site load.

I want to enhance the design by setting the preloader's div background color to white to cover up the loading process and hide the background HTML content until fully loaded.

If anyone has suggestions on achieving this desired effect, please share them!

An added note, I have JavaScript code in place to remove the preloader once the page loads completely; my main concern is addressing the visibility of the background contents during the loading phase.

htmlcsscss-transitionscss-animationspreloader

Answer №1

Create a wrapper using the #preloader that is fixed in position. Apply a background-color to finish it off!

.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>

Answer №2

To ensure the preloader element covers the entire screen, set its dimensions to 100% width and height, and remove any unnecessary styling for centering.

Additionally, align the layer elements within the preload by using a left and top of 50%.

It's worth noting that webkit prefixes are no longer required.

#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>

Answer №3

If I've grasped the question correctly, you can achieve this using simple JavaScript:

Revise your HTML as follows:

<!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 the content:

#content{
 display:none; 
}

To start, set up 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 load when the page is opened:

fadeOutEffect("preloader");
fadeInEffect("content");

For a sample working version, visit this link

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a loading mask for a section of a webpage using angularjs

How can I implement a loading mask/image for a $http request that loads data for a <select> tag on my webpage? I want the loading mask/image to only cover the specific section of the page where the data is being loaded. Here's the HTML code: & ...

cssangularjs

Injecting external HTML into a Razor view with Html.Raw is causing the page's HTML to display incorrectly

I have a separate external HTML file, which serves as the body of an email. This HTML file contains all necessary tags and elements for a complete HTML structure. I am trying to display this email content inside a Bootstrap modal. <div class="moda ...

htmlasp.netasp.net-mvcrazor

Ways to access a field value in SAPUI5

As I delve into OPENUI5/SAPUI5, I'm faced with the task of accessing data for the controls I've implemented. For instance: <Label text="Amount" /> <Input id="inputAmount" value="{Amount}" /> <Text id="lblCurrency" text="USD" > ...

javascripthtmlmodelsapui5

Why is the current Menu Item highlight feature not functioning properly?

Why isn't the highlight current Menu Item feature working? I've checked my code, but it doesn't seem to be functioning as expected. Could you lend me a hand? Html: <section id="menu-container"> <div id="bar"><img src="b ...

javascriptjqueryhtmlcss

Show another default value once an option has been chosen

I am looking to create a functionality where, after a user selects an option, the input will change to display "select another option" instead of showing the name of the selected option. For example: <select> <option value="" selected&g ...

javascripthtmlreactjs

Struggling to activate the link:hover transformation

At this link, you can find an example of using CSS transform to rotate links on hover, but I'm having trouble getting it to work as expected. <!DOCTYPE html> <html> <head> <style> a:hover{ ...

htmlcsstransform

What methods are available to create distinctive, shareable links akin to those utilized by Zoom and Google Hangouts?

I'm currently developing a group video chat app and I'm facing the challenge of generating distinct shareable links for every chat room created. Can anyone guide me on how to accomplish this? My aim is for users to easily join the chat room when ...

javascripthtmlcssnode.jsagora.io

Selenium - How to effectively obtain hyperlinks?

There are numerous web elements similar to this example <a data-control-name="browsemap_profile" href="/in/quyen-nguyen-63098b123/" id="ember278" class="pv-browsemap-section__member ember-view"> <img widt ...

htmlseleniumweb-crawlerabot

The twelfth child in the sequence is not functioning properly, although the others are working correctly

In my list, I have 12 elements and each element contains a div. My goal is to set different sizes for each div by using nth-child on the li element. However, the configuration for the 12th element does not seem to work correctly compared to the rest of the ...

htmlcss

Is there a way to trigger an ajax call specifically on the textarea that has been expanded through jQuery?

Whenever I expand a textarea from three textareas, all three trigger an ajax call. Is there a way to only call the ajax for the specific expanded textarea? I tried using $(this).closest('textarea').attr('id'), but it didn't work. A ...

javascriptjqueryhtmlajax

The CSS grid-template-areas feature is not performing as anticipated

.content { width: 600px; height: 600px; border: 4px solid lime; display: grid; grid-template-areas: 'a d' 'b d' 'c d'; } textarea, iframe { margin: 0; box-sizing: border-box; } .content > .a {gri ...

htmlcsscss-grid

unassigned variables in a PHP email submission form

My PHP email form is not sending emails because my variables are coming up as null. I have an echo statement after my code to check if the variables have values, but they are not being printed. Only 'done' and 'email $to' are showing up ...

phphtml

Refine the pandas Dataframe with a filter on a JavaScript-enabled website

I recently inherited a large software project using Python/Flask on the backend and HTML/Javascript on the frontend. I'm now looking to add some interactivity to one of the websites. I have successfully passed a dataframe to the webpage and can displa ...

javascriptpythonhtmlpandasflask

What is the best way to dynamically insert an image into an <li> element?

I am looking to enhance my menu by adding an image below each li item as a separator. How can I achieve this using CSS? I want the images to automatically appear whenever a new li tag is added to the ul. Here is the HTML code: <ul class="menu"> ...

htmlcsshtml-listsbackground-image

Unique property in css without a specified value

I have a challenge in creating a custom CSS property to disable an element without using the disabled keyword. This is the code I came up with, but unfortunately, it did not achieve the desired result: <style> .admin { color: green; enable: ...

css

Adjust the width of the dropdown menu to match the text input field using jQuery

Struggling with jquery-mobile to collect user information, I am facing an issue aligning the width of my select menu with the text input fields. Despite successfully matching the background and border colors of the select menu with the text input fields, ...

jqueryhtmlcssjquery-mobile

Choose an input that is not grouped with the rest

I am facing an issue where I need to group these three inputs together as one continuous form. However, there seems to be a problem with the select input not aligning correctly with the rest of the form. Is there something that I might be doing wrong? & ...

htmlcsstwitter-bootstrap

What's causing my text to slowly appear while my HTML canvas remains static and unchanged?

Can someone take a look at my code: http://jsfiddle.net/7y9Gp/2/ I've been struggling with trying to fade in and out text or images, but for some reason, my canvas object refuses to cooperate. I've tried swapping the position of the canvas with ...

htmlcsshtml5-canvasfadein

What steps can be taken to resolve the issue of the <td> element not being allowed as a child of an <a> tag?

https://i.stack.imgur.com/nsdA7.png How can I address these warnings? I utilized the material UI table component and suspect that the warnings are originating from component={Link} to={/patient/${patient.id}} <TableContainer className={styles.tableCo ...

javascriptcssreactjshtml-tablematerial-ui

Quick way to include id="" and class="" attributes to HTML elements using Sublime Text 2

Is there a way to configure Sublime Text 2 where inputting a . (dot) automatically generates class=" " and adding a # (hash) creates id=" " while typing an HTML opening tag? ...

htmlcsssublimetext2shortcut