The custom loading screen is obscuring just a portion of the scene

I am having an issue with my custom loading screen. When I try to display it, it only covers half of the scene:

Image while loading

Here is the code I am using for displaying the loading screen:


BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI = function() {
    if (document.getElementById("customLoadingScreenDiv")) {
        document.getElementById("customLoadingScreenDiv").style.display =
            "initial";
        return;
    }

    this._loadingDiv = document.createElement("div");
    this._loadingDiv.id = "customLoadingScreenDiv";
    this._loadingDiv.style.color = "white";
    this._loadingDiv.style.height = "1000px";
    this._loadingDiv.style.width = "100%";
    this._loadingDiv.style.alignContent = "center";
    this._loadingDiv.style.marginTop = "-50%";
    var img = new Image();
    img.src = "[link to gif]";
    img.style.position = "center";
    this._loadingDiv.appendChild(img);

    this._resizeLoadingUI();
    window.addEventListener("resize", this._resizeLoadingUI);
    document.body.appendChild(this._loadingDiv);
};

BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function() {
    document.getElementById("customLoadingScreenDiv").style.display =
        "none";
};

Can anyone help me identify what mistake I might be making?

javascriptcssscreenloadingbabylonjs

Answer №1

It seems like the main issue lies within CSS rather than any specific HTML tag mentioned in your question.

To address this, I recommend:

this._loadingDiv.style.color = "white";
this._loadingDiv.style.height = "100vh";
this._loadingDiv.style.width = "100%";

Answer №2

It looks like the issue might be caused by the margin-top: -50%. If you're attempting to center the div both vertically and horizontally, consider adding display: flex along with declaring the alignContent.

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

Change when the mouse departs

I am currently working on implementing a transition effect. My block consists of 3 main parts: Base block Hover image (coming from the top) Hover title (coming from the bottom) When hovering the mouse, there is also a background-color transition that o ...

htmlcsshovertransition

Could someone please explain how to obtain a compiled string within an AngularJS directive?

Check out the following code snippet for my custom directive: mymodule.directive("test", function($compile) { return { restrict: 'E', replace: true, template: '<div data-date="{{avail}}"></div>', ...

javascriptangularjsangularjs-directive

Is it possible to detect when a user reaches the end of a div without using a scroll event?

Seeking a JavaScript solution that can identify when a user reaches the bottom of a div with overflow: auto. While there are numerous solutions on Stack Overflow utilizing the onscroll event, I am curious if this can be accomplished using newer technology ...

javascripthtmlscroll

Utilizing Bootstrap Modal within a Data Table

I am currently utilizing Bootstrap modal in order to modify the value of each cell within a Table. My challenge lies in my attempt to include a button inside the modal that, once clicked, will open the same modal but for a different cell, rather than closi ...

javascripthtmlvue.jsbootstrap-4bootstrap-modal

Having trouble making variables function properly in Wordpress with Intercom's Javascript integration

When integrating Intercom, they provide the code snippet below to be inserted before the body tag: <script> window.intercomSettings = { app_id: "", name: "<?php echo json_encode($current_user->name) ?>", // Full name email: "& ...

javascriptphpwordpressintercom

Struggling with syntax errors while attempting to use ngIf to dynamically switch images in Angular 8

As a newcomer to the Angular world, I'm facing challenges when it comes to displaying different images based on ngx-translate methods. For instance, if the user selects English from the language dropdown, the image with English text should be displaye ...

htmlcssangularimageangular-ng-if

Is there a way to search for multiple items using just one search term?

On my app, there is a search bar that currently only looks up data for one specific attribute. For example, if I type in "Hammer," it only searches for Tool names. Now, I need to expand the search functionality to accommodate different types of strings. F ...

javascriptnode.jsvue.js

Ways to prevent the execution of JavaScript code?

I have a website that contains a block where AJAX-loaded code is coming from a remote server. How can I prevent potentially harmful code from executing, especially when it originates from a remote source? Is using the "noscript" tag sufficient to protect a ...

javascriptasp.net.netajaxasp.net-mvc

What is the best way to eliminate the colon (:) from an API URL within a React project?

I'm encountering an issue while trying to fetch data from an API with a dynamic id. The problem seems to be stemming from the presence of a colon in my Route path. Upon debugging, I realized that the colon is being included before the id in the URL li ...

javascriptreactjsreact-router

Is there a way to incorporate a preload page in Jekyll?

I recently stumbled upon this unique preload page style on Codepen and I must admit, my knowledge of JS is quite limited. body{ display: flex; justify-content: center; align-items: center; height: 870px; background-color:#000; po ...

javascriptjqueryhtmlcssjekyll

maintain visibility of website menu while scrolling

I am having trouble getting my drop-down menu to stay fixed at the top of the screen while scrolling down on my website. Despite several attempts, I have not been able to achieve this using the current CSS and menu setup. Can someone please assist me wit ...

javascriptjqueryhtmlcssstatic

Creating an array of objects data is a breeze with Vue.js

I have an array of data containing selected items, and I need to extract the IDs from this array into a new array so that I can send only the IDs to the back-end. Sample Code method toggleSelection(rows) { console.log('this.multipleSelection : &a ...

javascripttypescriptvue.jsvuejs2

Converting a string to a date in Vue.js

My API is returning a date string in the format: DD_MM_YYYY_hh_mm__ss I am aiming to present the string in the format: DD/MM/YYYY hh:mm:ss What is the best method to achieve this? ...

javascriptvue.jsvuejs3

New jQuery div elements do not have animations when using $(document).on

After creating an animation function that worked well with hovering over squares and leaving a trail, I later needed to add or remove squares based on the page size. Seeking help from here, I discovered my bind animation function wouldn't work on new ...

javascripthtmljquerycss

Retrieving an HTML page from one location and automatically populating textboxes with preexisting values on the receiving end

I'm currently facing a dilemma. Here's the issue: I need to load an HTML page (let's call it test.html) when a button is clicked on another page (referred to as home page). The test.html page has input boxes that I want to populate with p ...

javascriptjqueryhtmlajax

When trying to load a php page2 into page1 via ajax, the Javascript code fails to execute

Currently, I am in the process of learning PHP and JavaScript. I have encountered a particular issue with a webpage setup. Let's say I have a page called page1 which consists of two input fields and a button labeled 'Go'. Upon clicking the & ...

javascriptphpjqueryhtmlajax

What are some effective methods for testing web applications on mobile devices?

While I may not have the funds to purchase mobile phones and iPhones, I am eager to ensure my web applications can be accessed on mobile devices. Are there any software solutions available to simulate these devices, or what steps should I take? ...

htmlcssmobile

Add HTML within a targeted <li> element using ng-repeat in AngularJS

I recently embarked on my AngularJS learning journey through Pluralsight. Following the tutorial, I was able to create a Github user listing application using routing and basic directives. <div ng-controller="RepositoryController"> <h3 ng-hide="! ...

javascripthtmlangularjsangularjs-directiveangularjs-scope

Having trouble with jQuery after adding more content?

I recently started delving into the world of javascript, incorporating it into my website. Just last week, I came across a script that utilizes jQuery to load extra content onto my page. Initially, everything seemed to be functioning smoothly until I reali ...

javascriptjquerydocument-ready

What methods can be used to exclusively force XMLHttpRequest to utilize the ISO-8859-1 charset?

My database uses the ISO-8859-1 codepage, and I prefer to make all AJAX requests in this codepage. Can you provide guidance on how to correctly set the content-type for AJAX requests? ...

javascriptajaxencoding