Display only a loading image with a see-through background after submitting the page

After submitting the page, I would like to display a loading image in the middle of the page with a transparent background. The current styling code I have used is as follows:

#loading {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1104;
    background-color: #999999;
    width: 100%;
    height: 100%;
}

I am seeking help on how to modify this styling to ensure that the loading image is centered on the page and the content is slightly visible along with it.

Please note that I am only interested in the styling aspect and not the JavaScript part. Thank you.

javascripthtmlcsscss-position

Answer №1

If you're looking to completely restrict any user interactions with the loaded content, one approach is to overlay the element and position it in the center with a background styling:

#overlay {
    /* Covering the entire screen without regard to scrolling */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #00ff00 url(...) no-repeat 50% 50%;
}

Check out this customized demo using a partially transparent background for illustration purposes.

Update: Achieving both vertical and horizontal centering of an element can be quite challenging as discussed in this thread.

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

Conceal the scrollbar and enable horizontal swiping using CSS

I have set up a container where I want the content to scroll horizontally from left to right on mobile devices, and I would like to be able to swipe to navigate while hiding the scrollbar. You can view the implementation on this JSfiddle link Do you think ...

javascriptjqueryhtmlcss

Angular.js: how to filter an ng-repeat by a missing key/value pair

How can I filter the ng-repeat to only display rows where all key/value pairs are present? HTML <div ng-app="myApp" ng-controller="oneController"> <table class="table table-bordered table-hover"> <thead> <tr> <th> ...

javascriptangularjsfilteringangularjs-ng-repeat

Utilize modules within the AppModule to promote modularization and maintain separation of concerns in Angular 2

When using templates like those from the ASP.NET Core JavaScript services, typically a single module named AppModule is included. However, in my application, which is divided into two logical areas (AreaA and AreaB), I thought it would be better to use two ...

javascriptangularangular2-routingangular2-modules

How can I automatically direct my NodeJS application to the login screen?

Here is the setup of my project structure: There is a simple folder called static, within which I have: index.html (the homepage for user registration) login.html (the login page) In the parent folder, there is a file named server.js: // NodeJS code for ...

javascripthtmlnode.jsexpress

Utilizing onMouseEnter and onMouseLeave events in React using hooks

My goal is to create a drop-down menu with a delay, allowing users to hover over the child list items before they disappear. However, I seem to have made an error somewhere but can't pinpoint it. It's likely just a simple mistake that my eyes are ...

javascriptreactjsnext.jsreact-hooks

What is causing the unexpected behavior in this Vue transformation?

I am currently attempting to implement a simple slide panel using Vue.js, similar to the one shown in this example website: . However, I am facing an issue where the panel does not slide; instead, it waits for 2 seconds and then closes without any animatio ...

javascriptvue.js

Unable to display image on HTML page transmitted via socket in Java

After successfully loading my simple HTML in Chrome and seeing it display correctly, I encountered a troubling issue when trying to pass it through a Java socket. Despite only passing bytes through the socket, the image always appears broken. The perplexin ...

javahtmlsocketsclient-server

Sharing configurations between a Node.js application and client-side JavaScript

I am facing an issue where I need to use a config object in both my node app and browser. Below is the path and content of the configuration file: path: [app]/public/js/config.js content: var config = { "foo": "bar", "num": 42, "list": ["a" ...

javascriptnode.js

Seeking assistance in identifying the highest value in JavaScript (excluding the use of the max method)

Greetings and thank you for stopping by. I'm new to Javascript and currently facing an issue that I could use some help with. I am trying to identify the highest number from a set of variables using conditional statements within a function, but I seem ...

javascriptfunctionconditional-statements

Executing an AngularJS function through CasperJS is a common task that can

I am facing a challenge with testing a directive within a controller. The unit tests I am trying to write involve executing this code, which is triggered not by a click event but rather by a socket.io emit. Instead of attempting to mock socket.io, I am exp ...

javascriptangularjsunit-testingangularjs-directivecasperjs

Invalid template detected within the Kendo dropdown component

I am trying to create a template that will only be displayed if the data value is "Low". This is how I have set up my template column: template: '# if( data=="Low" ){#<span><i class="fa fa-square blue"></i> <span># } ' U ...

javascriptjquerycssangularjskendo-ui

Disable the default marker in Mapbox Geocoder

As a newcomer in the world of ReactJS and Mapbox GL JS, I am working on a project where I have successfully integrated a map with Geocoder, Navigation Controls, and Markers based on locations from a JSON file. However, I encountered an issue - whenever I s ...

javascriptreactjsmapboxmapbox-gl-js

What is the proper way to add a date and time into a MYSQL database using an HTML form

Dealing with the transition from "datetime" to "datetime-local" in HTML5 has unexpectedly caused some complications for me. Due to this shift, inserting datetime values into a MySQL table using an HTML form has become problematic, especially when using Car ...

phpmysqlhtmllaravelphp-carbon

Using React Native to dynamically change color based on API response

I'm currently working on a React Native project and I have a requirement to dynamically change the background color of a styled component based on the value retrieved from an API. However, I'm facing some challenges in implementing this feature. ...

javascripttypescriptreact-nativeexpostyled-components

Design a table without borders that is compatible for pasting into a Word document

I've been struggling to figure out the correct format for creating a border-less table that, when pasted in Word, will maintain its appearance as shown below: <strong>Foo</strong> <ol> <li value="0">This is zero.</li&g ...

htmlcssms-word

The accordion's height will expand on its own when one of the accordions in the same row is

Whenever an accordion expands in the same row in MUI, the height of the accordion will automatically increase. See below for the code snippet: {[1,2,3,4,5].map((i)=> <Accordion style={{backgroundColor: '#F9F9F9&ap ...

cssreactjsflexboxmaterial-ui

Can you explain the purpose of FunctionConstructor in typeScript?

As I delved into the Typescript Ecmascript source code, I stumbled upon this intriguing snippet: interface FunctionConstructor { /** * Creates a new function. * @param args A list of arguments the function accepts. */ new(...args: st ...

javascripttypescriptconstructor

Why won't my Java servlet code execute?

included the directory structure To facilitate adding two numbers and displaying the result upon clicking a submit button, I developed a straightforward Java servlet. This servlet retrieves the necessary information when called. The development environmen ...

javascriptjavajqueryhtmlajax

Choose all from the list of categories

function CheckItems(chk) { if(document.myform.brandid.value!="Check all"){ for (i = 0; i < chk.length; i++) chk[i].checked = true ; document.myform.brandid.value="UnCheck all"; }else{ for ( ...

javascriptarrayscheckbox

A guide on how to efficiently update and submit a reactive form with a single click of the submit button in Angular

Currently, I have a view component setup where clicking the edit button directs me to the register component for form updates using patchvalue. The issue that I am facing is that when I update and register the form using the same button, it creates anothe ...

javascriptangular