Tuesday, 23 August 2016

Show loading screen in html page

No comments


Loading Image-

https://github.com/tajchert/WaitingDots/blob/master/images/dotsLoadingAnimation.gif

<div id="divLoading">
    </div>

To show

 $("#divLoading").addClass('show');

CSS


#divLoading
{
    display : none;
}
    #divLoading.show {
        display: block;
        position: fixed;
        z-index: 100;      
        background-image: url('../images/loading.gif');
        background-color: #666;
        opacity: 0.4;
        background-repeat: no-repeat;
        background-position: center;
        left: 0;
        bottom: 0;
        right: 0;
        top: 0;
    }
#loadinggif.show
{
    left : 50%;
    top : 50%;
    position : absolute;
    z-index : 101;
    width : 32px;
    height : 32px;
    margin-left : -16px;
    margin-top : -16px;
}
div.content {
   width : 1000px;
   height : 1000px;

}