/* Usar display:none para ocultarlo. Luego lo ponemos en una posición fija en la ventana con position: fixed y con. El fondo se pone en blanco con opacidad de 80%, centrado y sin repetición y con la url al sitio donde está el gif de carga que usaremos. */ .overlay { display: none; position: fixed; z-index: 1000; top: 0; left: 0; height: 100%; width: 100%; background: rgba( 255, 255, 255, .8 ) /* url('https://i.stack.imgur.com/FhHRx.gif') */ /* url('https://cdn.pixabay.com/animation/2023/05/02/04/29/04-29-03-511_512.gif') */ /* url('https://pixabay.com/gifs/get/g912d0977dadd6ef3d6057c40f20180b7119edf97dd47e76c89fa731b59401f8bbdf6d87a3284ceb0d64a1a3c81653dda9781848bd76076e37989bfd1a6a5a1def46af02f0f8501e7110b35b51b8d1da6_128.gif') */ url('../images/loading-animation2.gif') /*-> Por alguna razón, no se muestra bien si la imagen se encuentra en un directorio dentro del proyecto */ 50% 50% no-repeat; } /* Cuando tiene la clase , quitamos la scrollbar con overflow:hidden */ body.loading .overlay { overflow: hidden; } /* Cuando body tiene la clase loading, el modal con el gif de carga sera visible */ body.loading .overlay { display: block; }