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

Is the image clickable to slide back and forth?

How can I achieve a sliding effect when clicking on the bottom-coupon class? Currently, I am only able to implement show and hide functionalities without any sliding effects. The picture slowly hiding from right to left, with the coupon-layer sliding out f ...

angularjshtmlcss

Determine the width of two inline input fields

Showing two inputs side by side: +------------+ +--------------------------+ | ID='inputA'| | ID='inputB' | +------------+ +--------------------------+ +------------------------------------------+ A ...

javascripthtml

Hiding CheckBox items within a CheckBoxList control in ASP.NET

Currently, I am working with a CheckBoxList control that is bound to data and can potentially become very large. In order to manage this, I am implementing a filter mechanism. Here is my approach: foreach( ListItem item in this.UserRolesList.Items ) { ...

c#asp.netcsschecklistbox

Transforming the NavBar in React: A guide to dynamically updating values

I am facing an issue with my NavBar that changes based on certain events. The current setup works fine, but I don't want to render it in every class that loads a new page. Initially, I had the NavBar rendering inside App.js so it could appear on all p ...

javascripthtmlcssreactjs

Creating an HTML Canvas using an AngularJS template

I am facing an issue with rendering html elements on a canvas using html2canvas JS. I am utilizing AngularJS for data binding on the html page, but unfortunately, the dynamic data is not showing up on the canvas generated from these html elements. For inst ...

javascripthtmlangularjscanvas

Ways to solve the issue of the mobile dropdown menu in Bootstrap

Check Out the Expected Look Here (Image link) See How it Appears on Mobile Devices The dropdown menu causes an increase in the size of the navbar on the mobile version. Below is the code snippet: <div style=" background-image: url(https://i.imgu ...

htmlcsstwitter-bootstrapbootstrap-4

Sharing details of html elements using ng-click (AngularJS)

I am currently exploring options to enable users to click on a "open in new tab" link, which would essentially transfer that HTML element into a fresh window for their convenience. I am seeking advice on how to achieve this. At the moment, I am able to la ...

javascripthtmlangularjs

Enhance the appearance of the input range by styling it with an additional class both before and

I have a JSF page where I am using an input range element. I want to add a different style class before and after the input range. Specifically, I want to display a plus icon (ui-icon-plusthick) before the input and a minus icon (ui-icon-minus) after the i ...

htmlcss

Using jQuery to temporarily disable a div element

I need to implement a timer in a div that will disable it for a specific duration, such as 3 seconds. Here is the HTML code snippet: <div class="answ-container" align="center"> <div class="c_answer" id="1316" name="1" data-rcat-no="1"> ...

jquerycsshtml

Is there a way to always keep an element positioned directly above a fluid image that is perfectly centered?

My current project involves creating an overlay to display a fluid image of any size. The challenge I'm facing is how to consistently position the close button 30px above the image and flush with its right edge. The catch is that the container doesn&a ...

javascriptjqueryhtmlcss

Transforming a GIMP design into a fully functional webpage

How can I transform my GIMP design into an actual website? After reviewing some information, it appears that using GIMP might not be ideal for creating CSS. It is recommended to utilize a CSS/HTML editor instead. Exporting HTML/CSS with Inkscape or GIMP N ...

htmlcssgimp

jQuery form validation not functioning as expected

I'm attempting jQuery form validation but encountering issues with the desired functionality. I would like the border of an input to turn red when it's empty upon focus out. Alternatively, I aim to incorporate the "has-danger" bootstrap class to ...

javascriptjqueryhtmlcssfrontend

Images that adjust to different screen sizes within a grid layout

I have four images that need to be aligned in the following layout: ____________ |1 |4 | |_____| | |2 |3| | |__|__|______| They must be flush against each other, occupy 100% of the viewport's width, and most importantly, be respon ...

javascripthtmlcsstwitter-bootstrap

Retrieve image details and display them in the console when the page is resized

Query: How can I retrieve and monitor the src, width, and height of all images on a webpage and display this information in the console whenever the page's size changes? Sample Code Snippet: var images = document.getElementsByTagName('img' ...

javascriptcssimage

Flexbox transforms Safari's Horizontal Nav into a Vertical layout

Issue with Horizontal Navigation Bar Turning Vertical in Safari I've been using flexbox to adjust the spacing and size of the li elements as the browser window size changes. Everything works perfectly fine in Chrome and Firefox, but for some reason, i ...

htmlcsssafariflexbox

Use the "webkit-keyframes" exclusively within the specified id

Is there a way to exclusively apply the "webkit-keyframes" within the #progress1 id? I have another progress bar (#progress2) on the same page with a different webkit-keyframes, which is why I need this distinction. #progress1 { background: white; / ...

htmlcss

What is the best way to eliminate HTML unicode content from the final item in a continuously changing list?

li:after{ content:"\00b6"; } <ol> <li>banana</li> <li>orange</li> <li class="last-class">apple</li> </ol> I am currently working on a dynamic list where the number of <li> tags varies over t ...

htmlcssunicode

I am unable to display the content even after setting `display: block` using the `.show()`

Hello there, I have attached my javascript and html code. While in debug mode, I can see that the CSS property 'display: none' changes to 'display: block', but for some reason, the popupEventForm does not open up. Any suggestions on why ...

javascriptjqueryhtml

How to align CSS counters to the right within the ::before pseudo-element

Utilizing CSS counters and the <code> element to display syntax highlighted code snippets with automatic line numbering: JSFiddle HTML: <code> <div class="line"><span>line 1</span></div> <div class="line">< ...

htmlcss

Using React Native's stylesheet to apply multiple values in a CSS statement

Here's a scenario to help clarify my question: Imagine I want to add margin to an element in the following way: const myView = () => <View style={styles.viewStyle}></View> const styles = StyleSheet.create({ viewStyle: { margin: ...

javascriptcssreactjsreact-native