Ejemplo de cargador de página CSS | Programar Plus

0

Reader Delang estaba teniendo problemas con el concepto CSS Page Loader que publiqué hace un tiempo. Así que fui e inventé una página de ejemplo. Es muy simple, y simplemente “simula” cargar algo. Como en, en realidad no está cargando nada. Tendrá que actualizar la página para restablecerla.

csspageloadexample.png

Si te lo perdiste antes, el punto es que puedes hacer un DIV que cubra toda la pantalla en blanco con un cargador de página animado con su propiedad de visualización establecida en ninguna:

#page-loader {
  position: absolute;
  top: 0;
  bottom: 0%;
  left: 0;
  right: 0%;
  background-color: white;
  z-index: 99;
  display: none;
  text-align: center;
  width: 100%;
  padding-top: 25px;
}

Luego, puede alternar la visualización de ese DIV con un fragmento de javascript en el parámetro onclick de un elemento de anclaje:

<a href="https://css-tricks.com/css-page-loader-example/#" onclick="javascript:document.getElementById('page-loader').style.display='block';">Click here</a>