/* (A) WRAPPER */
#fullspin {
  /* (A1) COVER FULLSCREEN */
  position: fixed; top: 0; left: 0; z-index: 1500;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.5);

  /* (A2) HIDDEN BY DEFAULT */
  opacity: 0; visibility: hidden;

  /* (A3) FADE ANIMATION */
  transition: opacity 0.5s;
}

/* (B) SHOW WRAPPER */
#fullspin.show {
  opacity: 1; visibility: visible;
}

/* (C) SPINNER */
#fullspin::before {
  display: block; content: "";
  width: 100%; height: 100%;
  background: url(/assets/img/spinner.gif) no-repeat center;
}

.modalSpinner {
  display:    none;
  position:   fixed;
  z-index:    1000;
  top:        0;
  left:       0;
  height:     100%;
  width:      100%;
  background: rgba( 255, 255, 255, .8 ) 
  url('https://i.sstatic.net/FhHRx.gif') 
  50% 50% 
  no-repeat;
}
body.loading .modalSpinner {
  overflow: hidden;   
}
body.loading .modalSpinner {
  display: block;
}