Overlay effect with jQuery and CSS

Overlay effect with jQuery:       

       1. This html code can be used as overlay effect when event postback occurs. 
       2. In this html code div with progress class used to show progress bar and the div with loading class used for displaying loading image or font inside the overlay effect. 
       3. Here I used font awesome icons.
       4. Switch the div style from display none to display block it will be shown as in the screen by applying jquery.

HTML:

    <div class="overlayidentifier overlay mouse-events-off" style="display: none">
        <div class="progress progress-mini ">
            <div style="width: 10%" class="pbidentifier progress-bar progress-bar-success">
            </div>
        </div>
        <div class="loading">
            <i class='icon-spinner icon-spin pink icon-5x'></i><i class='icon-blank icon-spin icon-5x'>
            </i>
        </div>
    </div>

CSS:
        /* Overlay effect for div */
        .overlay
        {
            background-color: rgba( 0, 0, 0, .2 );
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0; /* also -moz-opacity, etc. */
            z-index: 100000;
        }
        
        /* Progres bar styles */
        .overlay .progress
        {
            height: 3px !important;
            z-index: 100001;
        }

         /* loading image styles */
        .loading
        {
            text-align: center;
            height: 100%;
        }
        .loading i
        {
            top: 45% !important;
            position: absolute;
        }

jQuery:

$('.overlayidentifier').css('display', 'block');
$('.overlayidentifier').css('display', 'none');

------------------------------------------------------------------------------------------------------------