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('.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 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./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>

• javascript
• html
• css

Share Improve this question Follow edited Dec 10, 2017 at 8:01 Cœur 38.8k2525 gold badges206206 silver badges278278 bronze badges asked Apr 28, 2015 at 6:47 bartelomabarteloma 6,8851616 gold badges9494 silver badges209209 bronze badges 2

• I have paragraph and buttons in panel but not appearing transparent – barteloma Commented Apr 28, 2015 at 6:53
• jsfiddle/pvvo7kre/13 – Chris Commented Apr 28, 2015 at 7:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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./images/loading.gif') 
                50% 50% 
                no-repeat;
}

See this updated jsfiddle :- http://jsfiddle/pvvo7kre/7/