JSFiddle - React, Tailwind, and code Playground

CSS Position II: Loader pantalla completa. Posición absoluta: El div se posiciona de forma relativa a su inmediato ancestro que no sea estático. Si no tiene, será la ventana.

by Yolanda Robles

HTML

<div id="body">
    <input type="button" class="button" value="Mostrar Loader"/>
    
    <div id="Loader">
        <div id="LoaderContent" > Cargando...</div>
    </div>
</div>

CSS

#body
{
    width:100%;
    height:100%;
    background-color:grey;
    position:absolute; /*para que coja el 100% de la ventana*/
}

.button
{
    position: absolute;
    width:110px;
    height:30px;
    top: 50%; /*respecto a la ventana porque es position absolute */
    left: 50%; /*respecto a la ventana porque es position absolute */
}

#Loader
{
    display:none;
    background-color: orange;
    position:absolute;
    width:100%;
    height:100%;
}

#LoaderContent
{
    background-color: pink;
    width:90px;
    height:90px;
    position:absolute;
    top:50%;
    left:50%;
}

JavaScript

$('input[type=button]').click( function() {
  
    // Lo mostramos
    $("#Loader").fadeIn(500);
    
    // Lo ocultamos
    $("#Loader").fadeOut(500);
    
});