<style>

.contenedor_carga{
	background-color: #fff; 
  margin-top: 1.6rem;
	height: 100vh;
	width: 100vw;
  position: fixed;
	transition: all 1s ease;
	-o-transition: all 1s ease;
	z-index: 10000;
  }
  
  .carga{
	 border: 25px solid #cccccc;
   border-top-color: #19B3D3;
	 border-top-style: groove;
	 height: 150px;
	 width: 150px;
	 border-radius: 100%;
	 position: absolute;
	 top: 0;
	 left: 0;
	 right: 0;
	 bottom: 0;
	 margin:auto;
	 -webkit-animation: girar 1s linear infinite;
	 -o-animation: girar 1s linear infinite;
	 animation: girar 1s linear infinite;
  }
  
  .texto{
	height: 62px;
    width: 173px;
    position: absolute;
    top: 16rem;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
   
  }

  .texto h2{
	 font-size: 2rem;
    font-weight: 600;
  }
  
  @keyframes girar{
	from{ transform: rotate(0deg);}
	to{ transform: rotate(360deg);}
  }

   .formulario  input[type="checkbox"]:checked + .txt-color {
		padding: 9px 12px !important; 
	}

    .formulario  input[type="checkbox"]:checked + label {	
	   padding: 9px 12px !important; 	
	}

</style>


<div class="contenedor_carga">
         <div class="carga">
        </div>
        <div class="texto">
          <h2>Cargando..</h2>
        </div>
   </div>

   <script>
     window.onload = function(){
        var contenedor = document.querySelector('.contenedor_carga');
        contenedor.style.visibility='hidden';
        contenedor.style.opacity = '0';
      }
    </script>