I'm having trouble getting rid of this stubborn loader on the website

I am currently utilizing the following template: . My objective is to eliminate the preloader progress bar that displays the loading progress of the page in percentage. The files associated with this preloader are as follows:

Loader CSS File - www[dot]themenesia[dot]com/themeforest/archi-light/css/jpreloader.css

JS File - www[dot]themenesia[dot]com/themeforest/archi-light/js/jpreloader.js

Page CSS File - www[dot]themenesia[dot]com/themeforest/archi-light/css/style.css

I have attempted to delete both of these files and removed the css link and script from the page. Additionally, I eliminated the specified style from line 55 of the Page CSS File:

body {
    display:none;
}

Despite taking these steps, the page continues to fail to load and appears blank on screen. Any assistance would be greatly appreciated!

javascripthtmlcsshtml5-canvas

Answer №1

I believe the identifier for the loader is #jpreOverlay.

Attempting to include the following:

#jpreOverlay { display: none !important; }

in your CSS might solve the issue.

Answer №2

To customize your website's appearance, include the following CSS:

#customOverlay { 
    visibility: hidden !important; 
}

Answer №3

The reason why the screen appears blank is because you have hidden the content. The loader on the screen is probably coded with JavaScript, so in order to remove it, you will need to delete both the JavaScript and HTML code related to the loader. Additionally, make sure to remove the following line of code:

body {
   display: none;
}

By doing this, the main page will be visible and the loader won't appear anymore.

Answer №4

body {
    display: block !important;
}

Include the code snippet provided below in your css file.

UPDATE

Remove the specified lines from designesia.js

// --------------------------------------------------
    // preloader
    // --------------------------------------------------

    //calling jPreLoader function with properties
    jQuery('body').jpreLoader({
        splashID: "#jSplash",
        splashFunction: function () {  //passing Splash Screen script to jPreLoader
            jQuery('#jSplash').children('section').not('.selected').hide();
            jQuery('#jSplash').hide().fadeIn(800);
            init_de();
            var timer = setInterval(function () {
                splashRotator();
            }, 1500);
        }
    }, function () {    //jPreLoader callback function
        clearInterval();

        jQuery(function () {
            var v_url = document.URL;

            if (v_url.indexOf('#') != -1) {
                var v_hash = v_url.substring(v_url.indexOf("#") + 1);


                jQuery('html, body').animate({
                    scrollTop: jQuery('#' + v_hash).offset().top - 70
                }, 200);
                return false;
            }
        });


    });

    // End of jPreLoader script

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

What is the most efficient method for transferring session data from a Client component to a server component in NEXT.js version 13 and beyond?

Currently, I am working on a web application that requires passing session?.user?.email from the useSession() function in next-auth/react to a server-side component. This server-side component will then execute a fetch request to /api/users/email/ to deter ...

javascriptreactjsnext.jsnext-auth

Presenting CSV data in a tabular format using Angular and TypeScript

I am facing an issue with uploading a CSV file. Even though the table adjusts to the size of the dataset, it appears as if the CSV file is empty. Could this be due to an error in my code or something specific about the CSV file itself? I'm still learn ...

htmlangulartypescriptnpm

Struggling with CSS button hover effect: can't get border and background change to work

Hello coding community! I am a beginner in programming and I'm eager to learn. Recently, I came across a stunning button effect on Codepen that caught my attention. You can check it out here. However, when I tried to replicate the code from this exam ...

htmlcssbutton

Firefox is having trouble keeping <select> tags within their designated borders

I am currently developing a mobile app that requires the use of 3 <select> elements stacked on top of each other. It is crucial for these tags to align perfectly with each other and not extend beyond the boundaries of the background div. I have manag ...

htmlcssangularjsdrop-down-menu

Arrange the elements in an HTML table with the first and last columns on the left and right sides

Is it feasible to have the first and last columns of an HTML table fixed while allowing the middle columns to be scrollable? (This functionality is achievable in jQuery DataTables, but what about a basic HTML table?) ...

htmlcsshtml-tablesticky

Which property is best suited for styling a phone number field in the MUI data grid in ReactJS?

I previously utilized the pattern attribute for input fields in pure HTML, but now I no longer have any input fields. What should be my next steps? Can you provide me with a reference in the MUI documentation? https://i.stack.imgur.com/ ...

javascriptmaterial-uiformatmui-datatable

Is there a way to incorporate text at the end of a row in HTML?

I have a photo and some text on my website. The photo is displayed on the left side, while the text appears nicely on the right side. Now, I am looking to include an additional block of text below the existing text. How can I accomplish this? What steps ...

javascriptcsshtml-table

Display data from two arrays in real-time

The following data is available: "PensionPlanSummary": [ { "Type": "DefinedContributionPension", "Participants": [ { "Year": 2018, "Value": 425.0 } ...

javascriptarraysreactjshtml-table

How can you use DOM manipulation to extract input data from an <input type="file"> element?

Is there a way to retrieve the data from an <input type="file"> element, specifically if it contains an image, without utilizing an html form? Here is the HTML code: <body> <input type= "file"> </body> ...

javascript

Is it possible to have the ShowHide plugin fade in instead of toggling?

I'm currently utilizing the ShowHide Plugin and attempting to make it fade in instead of toggle/slide into view. Here's my code snippet: showHide.js (function ($) { $.fn.showHide = function (options) { //default variables for the p ...

javascriptjqueryshow-hide

Retrieve the $ionicConfigProvider within a Controller

In my controller file named ProfileController.js, I am trying to change the text of the back button. After doing some research, I found this code snippet: $ionicConfigProvider.backButton.text('Go Back').icon('ion-chevron-left'); How can ...

javascriptangularjsionic-framework

Using AngularJS to implement ngView within a custom directive

I've been attempting to implement ng-view within a custom directive, but it doesn't seem to be functioning properly and I'm not receiving any console errors. Here's the code for my directive: (function() { 'use strict'; ...

javascriptangularjsangularjs-directiveng-view

What is the process for executing Express's scaffold by utilizing "nodemon" and the basic "node" command instead of relying on the "npm start" command?

Could you help me locate where I need to make changes in my package.json file? Here is the content of my package.json: { "name": "xyz", "version": "0.0.0", "private": true, "scripts": { "start": "node ./bin/www" }, "dependencies": { ...

javascriptnode.jsexpress

An easy guide to using validators to update the border color of form control names in Angular

I'm working on a form control and attempting to change the color when the field is invalid. I've experimented with various methods, but haven't had success so far. Here's what I've tried: <input formControlName="pe ...

javascriptangulartypescript

What is the purpose of the 'onClassExtended' function in Extjs 6 for class definition?

Ext.define('Algorithm.data.Simulated', { needs: [ //.... ], onClassExtended: function(obj, info) { // .... } }) I came across this code snippet but couldn't locate any official documentation for it on Sencha ...

javascriptextjs

How to modify the color of the placeholder text in a select dropdown using Material-ui

I have a material-ui select component that displays a dropdown menu of options for the user to choose from. The placeholder text, which currently reads "select option," appears in light grey to prompt the user to make a selection. However, I am concerned t ...

javascriptmaterial-ui

Is Javascript Functioning Properly?

Similar Question: How do I determine if JavaScript is turned off? Can we identify whether javascript has been disabled and then redirect to a different page? I am currently working on a project using JSPs, where I have integrated various advanced java ...

javascriptjsp

Tips for Minimizing DIV Space with the Flex Property

I need some help with reducing the space between the individual content (1, 2, 3, 4) and its border in this Fiddle. As a newcomer to Flexbox, I'm unsure if there's an easy solution to this issue. Here is a visual representation of what I mean: ...

htmlcssflexboxspacing

Renew Firebase Token

Currently, my email and password authentication flow in web Firebase JavaScript involves generating a token that I then verify on my node.js backend using firebase-admin. To make things easier, I store this generated token in the browser's local/sessi ...

javascriptangularjsnode.jsfirebasefirebase-authentication

A guide on implementing Google reCAPTCHA in a Nuxt.js website

Trying to implement the recaptcha-module from nuxt-community in my Nuxt project but struggling with verifying if the user has passed the check. The documentation and example provided are not clear enough for me (https://github.com/nuxt-community/recaptch ...

javascriptvue.jsrecaptcha