Loading Indicator

Flow
1

Hi,

I Am using vaadin 7.6.5 with valo theme .

I am trying to override the loading-indicator to show as spinner and that to exactly in center of the screen. With my below css code its working fine for me.

How can i make other components not to listen any clicks from the user while spinner is running. and after spinner finishes its works than other components should listen to user clicks.

.v-loading-indicator,
.v-loading-indicator-delay,
.v-loading-indicator-wait {

    top: 52%;
    right: 50%;
    left: 50%;
    
    right: auto;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    margin-left: -22px;
    
    background-position: 50%;
    background: transparent url(../valo/shared/img/spinner.gif) no-repeat;
    pointer-events: auto;
 }

.v-loading-indicator[style*=“none”]
:before {
display: none;
}

Thanks
Nagaraj RC