Breaking

Post Top Ad

Your Ad Spot

domingo, 10 de marzo de 2019

Overlay Preloader Image over Div usando CSS

En el proyecto web, la imagen superpuesta en div es una característica más utilizada. Supongamos que una página tiene una lista de contenido con enlaces de paginación y cuando se hace clic en el enlace de paginación, se muestra el siguiente contenido en lugar del contenido anterior. Recuperar el servidor de contenido lleva algo de tiempo y el usuario no entiende lo que sucede detrás de la escena. Por lo tanto, si muestra una imagen de carga en la lista de contenido, será útil para el usuario comprender el proceso de carga de datos.
En este artículo, proporcionaremos un fragmento de código CSS para mostrar un precargador sobre la división de contenido. No solo para el contenido de la lista, puede usarlo para cada caso en el que desee superponer algo en el contenido.

CSS

.content { position :  relative ;}
 .overlay { position :  absolute ; izquierda :  0 ; arriba :  0 ; derecha :  0 ; abajo :  0 ; índice z :  2 ; color de fondo :  rgba ( 255,255,255,0.8 );}
 .overlay-content {
     posición :  absoluta ;
    transformar : traducirY ( -50 % );
     -webkit-transform : translateY ( -50 % );
     -ms-transform : translateY ( -50 % );
    superior :  50 % ;
    izquierda :  0 ;
    derecha :  0 ;
    text-align :  center ;
    color :  # 555 ;
}

HTML

< div  class = "content" >
    < div  class = "overlay" > < div  class = "overlay-content" > < img  src = "loading.gif"  alt = "Loading ..." /> </ div > </ div >
     <! - Content va aquí -> 
</ div >

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas