Loading screen for specific content section

I currently have a CSS preloader implemented on my WordPress site, but I am facing an issue where the preloader hides the entire page instead of just a part of the content that I want to hide. Specifically, I would like to hide only the main content section while keeping other elements visible such as the site title, menu, and footer.

Within the header.php file:

https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js

$(window).load(function() {
$(".cssload-loader").delay(1300).fadeOut();
$(".preloader").delay(1400).fadeOut("slow");
})
.preloader  {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #fff;
     z-index: 100501;
    height: 100%;
width: 100%;
 }

<!-- More CSS styles omitted for brevity -->

@keyframes cssload-rotate135 {
<!-- Animation keyframes definitions -->
}

@-moz-keyframes cssload-rotate135 {
<!-- More animation keyframes definitions -->
}
<div class="preloader"> 
<div class="cssload-loader">
<!-- HTML structure for loader -->
</div>
</div>

Feel free to visit my site to view the page code

I am considering implementing a script to display the site title and menu while hiding the content section, or potentially adjusting the CSS styles to achieve the desired effect. Any suggestions are welcome!

javascriptjquerycsswordpresspreloader

Answer №1

Make the following adjustments to the CSS.

.preloader {
    position: fixed;
    background-color: #fff;
    z-index: 107;
    height: 100%;
    width: 100%;
}

Then, place the preloader element inside the content div as shown below.

<div class="col-md-8 col-md-offset-2">
    <div class="preloader" style="display: block;"> 
      <div class="cssload-loader" style="display: none;">
        <div class="cssload-side"></div>
        <div class="cssload-side"></div>
        <div class="cssload-side"></div>
        <div class="cssload-side"></div>
        <div class="cssload-side"></div>
        <div class="cssload-side"></div>
        <div class="cssload-side"></div>
        <div class="cssload-side"></div>
     </div>
   </div>

   <article>....  Article content .....</article>
</div>

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

Encountering difficulties in constructing the Gatsby project due to issues with the Wordpress post image. The specific error code is #85928, with an expectation of

I recently integrated a blog into my Gatsby project. While it functions smoothly during the 'gatsby develop' phase, I encounter an error when attempting to build it. The issue appears to be linked to the featured image of Wordpress posts. Below ...

wordpressnpmgraphqlgatsbyheadless-cms

Using $scope in ng-include does not always result in the partial view being rendered

Within the internal view, I am dynamically rendering HTML using ng-include and ng-if directives. <div ng-controller="myController"> <div ng-if="myProperty == 1"> <div ng-include="'view1.html'"></div> ...

javascriptangularjs

Having difficulty generating a suitable CSS selector

Within a webpage, there are two types of links. One type includes both a class and itemprop, while the other type only contains a class. In the examples below, the first link has both class and itemprop, and the second link only has a class. If I want to c ...

csscss-selectors

Rotating an object around another object in a 3D matrix axis using Three.js

I currently have the ability to rotate one axis. Here is the code that's working now: https://codepen.io/itzkinnu/full/erwKzY Is there a way to rotate an object on a random axis instead of just one fixed axis? Maybe something similar to this exam ...

javascriptrandomthree.jsrotationaxis

Introduce a pause using the raycaster function

When my raycaster intersects an object for 2 seconds, I want to update the object's texture. I attempted to use the clock function, but I am unsure of how to properly implement it. var clock = new THREE.Clock(); clock.autoStart = true; var inters ...

javascriptthree.js

Struggling to achieve success in redirecting with passport for Facebook

For a "todolist" web application that utilizes passport-facebook for third party authentication, the following code is implemented: passport.use(new FacebookStrategy({ clientID: '566950043453498', clientSecret: '555022a61da40afc8ead59 ...

javascripthtmlnode.jspassport-facebook

Using varying fonts in Android web design can create a visually

Living in South Korea, my English isn't the best I hope you can understand despite my poor language skills. My issue is related to this: Unlike Android 6.0 or later versions, fonts vary from version to version. This involves CSS styling .box ...

androidhtmlcssfonts

Definition of a Typescript Global.d.ts module for a function that is nested within another function

Simply put, I have a npm module that exports a function along with another function attached to it: // @mycompany/module ... const someTool = (options) => { // do some cool stuff }; someTool.canUseFeature1 = () => { return canUseSomeFeature1(); ...

javascripttypescript.d.ts

Displaying client-side filtered rows in a jqGrid with postData filter upon initial loading

Our website includes a jqGrid that initially retrieves its rows using the built-in ajax fetch feature, returning a json object. We then apply filtering and searching on the client side by creating custom functions to generate postData filters. However, we ...

javascriptjqgridclient-side

Guide on achieving a full scrollable parent by positioning a pseudo-element absolutely

I am trying to have a position: absolute element fill its parent, even if the parent is scrollable. To demonstrate this issue, I created a codepen example. Although the red overlay fills the div initially, it does not stay overlaid when the content is sc ...

htmlcss

What is the highest image size that desktop Chrome can accommodate?

Let's delve into a specific scenario amidst the vast possibilities. Assume the following technical specifications: Browser: Chrome Latest (Desktop) Hardware: Windows Standard PC with default Intel Graphics card Ram: 8GB Processor: i7 @ 3.40 GHz The ...

javascripthtmlcssimagegoogle-chrome

Why is React failing to render after state change in a functional component?

import React, {useState, useEffect} from 'react'; import MakeCard from './MakeCard.js'; export default function DisplayCards(props) { const [images, setImages] = useState([{}]); // Display component after images are fetched use ...

javascriptreactjsreact-functional-component

working with css to rearrange 3 divs

I am trying to rearrange the positioning of two divs within my HTML code: <div>container <div> Navigation backwards </div> <div> Social buttons </div> <div> Navigation forwards </div> </div> This setup disp ...

cssmedia-queries

Navigate to a different position of a specified element within an expanding pivot grid

I'm currently dealing with a pivot table/grid that allows users to expand and collapse rows. My challenge is figuring out how to scroll to an expanded row after an expansion occurs. Typically, I use the following code for scrolling functions: ...

javascriptc#visual-studioselenium

Challenge with CSS Layering

I'm currently experiencing some issues with layering on my website. The problem at hand is that visitors are unable to interact with links within the div layers for some unknown reason. They can't click on the sidebar images or highlight text. I& ...

css

The GIF Loader fails to animate while an AJAX request is in progress

Displaying a DIV element containing a loading GIF image while waiting for an AJAX call response. Initially, the DIV element is hidden. Upon clicking a checkbox, the loader DIV is shown, followed by the completion of the AJAX call, and then hiding the load ...

javascriptjqueryhtmlajaxanimated-gif

NodeJS Puppeteer encountering problem with setting download behavior

When attempting to specify a custom download path, Chrome seems to ignore the downloadPath option and continues to save files in the default C:/Users/Me/Downloads folder regardless. const puppeteer = require('puppeteer'); (async () => { c ...

javascriptnode.jsgoogle-chromeautomationpuppeteer

Modify the hover color of heading 1 only for hyperlink texts

I am attempting to adjust the hover color specifically for text that contains a link. Below is the CSS code I have tried, but it changes the color regardless of whether there are links present or not. h1, h2, h3, h4 { color:#3F3F3F; } h1:hover, h2:hove ...

csshyperlinkcolorshover

Locate an element that is not directly included in the DOM path

My website has a complex DOM structure, but here is a simplified version: <div> <div> <div> <div class="remaining">132</div> </div> </div> <div> <button>clicky</button> ...

jquerydom

Refreshing Rails Views by Periodically Polling the Database

We are currently developing a statusboard to monitor all our external servers. Our database contains information about OS, software versions, and other details that are subject to frequent updates. To ensure real-time visibility of these changes on the web ...

javascriptjqueryruby-on-railsajaxpolling