I have some web page to fetch the user related data and huge count of images. The problem is while load the page it took more time due to images , Images are rendered in separate div in the page. So i want loader spinner for that particular div.
Note: I know how to implement for page load. Just need for particular div.
Just look the below my implementation idea.
<body>
<div id="divUserContent">
</div>
<div id="divuserimages">
</div>
</body>
Just make sure the parent element to the loading element has a position set to relative. See this example below.
body {
margin: 0px;
font-size: 16px;
}
.container {
background: rgba(0,0,0,.2);
height: 100vh;
align-items: center;
justify-content: center;
display: flex;
position: relative;
}
.loading-container {
padding: 10rem;
border: 1px solid #000;
position: relative; /* this keeps .loading-text inside it */
width: 5rem;
}
.loading-text {
position: absolute;
top: 50%;
left: 50%;
margin-top: -9px; /* take .loading-text height, divide by -2 */
margin-left: -35px; /* take .loading-text width, dividide by -2*/
}<div class="container">
<div class="loading-container">
<div class="loading-text">Loading...</div>
</div>
</div>