Overlay displayed on top of a single div element

Trying to implement a loading overlay in an Angular project within a specific div rather than covering the entire page. Here's a Fiddle illustrating my current progress:

#loader-wrapper {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.3);
}

The red border on the div indicates its area, while the loader does not cover it entirely.

Seeking a solution to expand the loader to fill the whole div and center it both vertically and horizontally.

Initial attempts to position it at the top were unsuccessful.

Additionally, having a relative loader size could prevent issues if the div contains minimal text. However, implementation methods for this are unknown.

htmlcss

Answer №1

To make the top and left properties work, you must ensure that it is set to position: absolute;. This will remove it from the context and allow these properties to function properly. Remember, the positioning of an absolutely positioned element is relative to its closest ancestor with position: relative set. If no such ancestor exists, it will default to the <body>.

I have also adjusted the margin of your loader to center it on the screen.

.container {
    position: relative;
}
#loader-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.3);
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  
        -ms-transform: rotate(0deg);  
        transform: rotate(0deg);  
    }
    100% {
        -webkit-transform: rotate(360deg);  
        -ms-transform: rotate(360deg);  
        transform: rotate(360deg);  
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  
        -ms-transform: rotate(0deg);  
        transform: rotate(0deg);  
    }
    100% {
        -webkit-transform: rotate(360deg);  
        -ms-transform: rotate(360deg);  
        transform: rotate(360deg);  
    }
}
<div class="container">
  <div class="row">
    <div class="col-md-6" style="border: 1px solid red;">
      <p>In hac habitasse platea dictumst. Sed justo diam, imperdiet sit amet hendrerit sit amet, etc...</p>

       <p>Donec aliquam est non viverra hendrerit. Etiam in faucibus erat, ut pulvinar nulla.</p>
        <div id="loader-wrapper">
          <div id="loader"></div>
        </div>
    </div>
  </div>
</div>

Answer №2

To achieve the desired effect, ensure that you include position:relative in the parent element (.col-md-6) and absolute in the child element #loader-wrapper

.col-md-6 {
  position: relative;
  border: red solid 1px;
}
#loader-wrapper {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
}
#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #3498db;
  -webkit-animation: spin 2s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 2s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}
#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #e74c3c;
  -webkit-animation: spin 3s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 3s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}
#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #f9c922;
  -webkit-animation: spin 1.5s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 1.5s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <p>In hac habitasse platea dictumst. Sed justo diam, imperdiet sit amet hendrerit sit amet, euismod ut dolor. Vivamus ac nisi eget felis pretium ullamcorper. Curabitur id libero ante. Suspendisse potenti. Nulla eget aliquam mi. Ut arcu mi, vulputate
        eget ex ut, tincidunt aliquam mauris. Suspendisse faucibus justo vel tellus laoreet imperdiet. In nec ipsum finibus, interdum mauris ut, lobortis augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Aliquam quis blandit
        dolor.
      </p>

      <p>Donec aliquam est non viverra hendrerit. Etiam in faucibus erat, ut pulvinar nulla. Nulla in tincidunt enim. Suspendisse potenti. Morbi tristique nisl mi, et tempor massa facilisis sit amet. Integer eu iaculis diam. Nullam accumsan dapibus nulla,
        eget maximus nisi molestie eget.</p>
      <div id="loader-wrapper">
        <div id="loader"></div>
      </div>
    </div>
  </div>
</div>

Answer №3

Here is the solution:

Simply add "position: relative" to the parent element and "position: absolute" to the child element.

.parent {
  position: relative;
}

#child-element {
   position: absolute;
}

https://jsfiddle.net/abc123xyz/4/

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

Having trouble using jQuery's .off() method to remove an event handler?

I'm facing an issue with my jQuery code where the .off('click') method doesn't seem to be working. I've tried removing the event binding from '.reveal-menu', but it's not working as expected. The initial animation wo ...

javascriptjqueryhtmlcss

Determine the precise location of a screen element with jQuery

Can anyone help me determine the precise position of an element on the current visible screen using jQuery? My element has a relative position, so the offset() function only gives me the offset within the parent. Unfortunately, I have hierarchical divs, ...

javascriptjqueryhtmlcss

Having trouble with the initial tap not being recognized on your mobile browser?

When using mobile web browsers (specifically chrome and firefox on iOS), I am experiencing an issue where the hamburger menu does not trigger when tapped for the first time. For a simplified version of the HTML/CSS/JS code, you can check it out at: https ...

javascripthtmlcssmobile

Removing dropdown lists from input forms can be achieved without using jQuery by utilizing vanilla JavaScript

Looking to build a custom HTML/JavaScript terminal or shell. Interested in utilizing an input box and form to interact with JavaScript functions/commands. Unsure of how to eliminate the drop-down menu that appears after previous inputs. Pictured terminal: ...

javascriptjqueryhtml

Determine the elapsed time in seconds between two specified moments

I am trying to implement two input fields in my HTML, one for a starting point and another for an end point. The user will enter two times like this: For example: [8:15] - [14:30] alert("XXXXX seconds") I want to calculate the number of seconds between 8 ...

javascripthtmltime

Switch out the rowspan attribute in HTML for a CSS alternative

Hello there, I've been experimenting with replacing my table layout with divs and CSS, but I'm struggling to find a way to replicate the behavior of the rowspan attribute. Here is the original code snippet: <table> <tr> <td> ...

csshtml-table

Connecting to an element within a separate node (XSLT)

I have an XML document that includes a list of companies. My goal is to use XSLT to create links that point to the <link> child of the next company node. To provide a clearer picture, here is a snippet of sample XML data I am working with: <portf ...

htmlxmlxslt

Verify login availability using Javascript auto-check

For quite some time now, I've been grappling with a significant issue that has been consuming my attention. I am determined to implement an auto-check login availability feature in the registration form of my website. My goal is for it to verify the ...

javascriptphpjqueryhtmlajax

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

The method of utilizing React with Redux to display component properties

I am currently trying to include my common component in my main.js file Successfully implemented this However, when attempting to print my Redux data values in the common component, I created a method called handleClickForRedux to handle this task. Even af ...

javascripthtmlcssreactjsredux

Adjust the active carousel item to 0 within onsen-ui (displaying a list of carousel items in a sliding menu)

In my sliding menu, each menu item contains a carousel with two items. I am trying to make the first carousel item show after closing and reopening the menu, or by clicking a button outside of the list on the menu page. This is my current setup: <ons- ...

javascriptcssangularjsonsen-ui

Responsive Website with Horizontal Scrolling

Is it feasible to develop a website that smoothly scrolls across five panels horizontally while maintaining responsiveness? I've managed to achieve this for a specific viewport size by nesting a div with the five panels extended and using javascript t ...

javascriptjqueryhtmlcssresponsive-design

retrieving dynamic data from an HTML form to JavaScript

Currently, I am dynamically adding elements using JavaScript. The count is defined and increases by one. <span style="margin-left:10px;">File Type : <select name="select_type_'+count+'" > <option value="select">Select</optio ...

javascripthtml

What are the best techniques for centering a prime ng form both vertically and horizontally?

I am currently using prime ng 9.1.3 along with primeflex 1.3.0 in my project. Despite applying p-align-center, I am facing difficulty in vertically and horizontally centering the form on the screen when using a full screen height of 100vh. <div class=&q ...

cssangularflexboxprimeng

The border in my HTML table is not displaying when I run my flask application

My flask application was running smoothly in a virtual environment until I encountered an issue with the html borders not showing up. Even after seeking help from a friend who knows some html, the problem still persists. app.py: from flask import Flask, r ...

pythonhtmlcssflaskvirtualenv

Prettyprint XML in Angular 8+ without using any external libraries

I am working with Angular 8+ and I need to display XML content in a nicely formatted way on my HTML page. The data is coming from the backend (Java) as a string, and I would like to present it in its XML format without relying on any external libraries or ...

htmlangularxmlnpmformat

How can I showcase an image using Angular?

Recently, I've started working with Angular and I'm trying to display images using assets. I have a service that looks like this: const IMAGES = [ {"id":1, "category": "boats", "caption": "View from the boat", "url":"assets/img/boat_01.jpeg"}, ...

htmlangular

The CSS styling in Internet Explorer 11 is causing cells to merge into the same column in a table

In my CSS-styled form that resembles a table, the two input elements are displaying on top of each other instead of side by side. How can I adjust them to appear next to each other? There is a possibility that this issue could be browser-specific. The for ...

htmlcssinternet-explorer

Can one image impact other images through a wrapping function?

I am facing an issue with positioning 3 images independently from the window size using the position: relative declaration. When I try to define positions for the first 2 images and then insert the third one, it disrupts the position of the first two. Is ...

jqueryhtmlcss

Adding a three-dimensional perspective to an HTML5 canvas without utilizing CSS3 or WebGL

Here is a canvas I am working with: http://jsbin.com/soserubafe Here is the JavaScript code associated with it: var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var w = canvas.width; var h = canvas.height; var cw=canvas. ...

javascriptcsshtmlcanvas3d