I want to create a css class for loading operations. I have div panels that contains ajax request operations. I will overlay loading blur on panel. but not working. This is my working code
Text and buttons not appearing under the loading incon. my transparent is 0.4
.main{
height: 250px;
width: 300px;
border: solid 1px red;
overflow: hidden;
float:left;
margin-right:10px;
}
.medium{
height: 250px;
width: 100px;
border: solid 1px blue;
overflow: hidden;
}
.loading {
position:relative;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 205, 205, 205, 0.4 )
url('http://www.easyshopindia.com/images/loading.gif')
50% 50%
no-repeat;
}
body .loading{
display:block;
overflow:hidden;
}
<div class="main">
<div class="loading">
</div>
<button>show images</button>
<p>This is my paragraph.</p>
</div>
<div class="medium">
<div class="loading">
</div>
<button>show info</button>
<p>hello this is small box</p>
</div>
i think you want to set loading as overlay, for that you have to give the parent element as position: relative
and give child loading element position: absolute
to fill the parent element.
.main{
height: 250px;
width: 300px;
border: solid 1px red;
overflow: hidden;
float:left;
margin-right:10px;
position: relative;
}
.medium{
height: 250px;
width: 100px;
border: solid 1px blue;
overflow: hidden;
position: relative;
}
.loading {
position: absolute;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 205, 205, 205, 0.4 )
url('http://www.easyshopindia.com/images/loading.gif')
50% 50%
no-repeat;
}
See this updated jsfiddle :- http://jsfiddle.net/pvvo7kre/7/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.