Tengo un datatable que carga exitosamente los datos, le toma un tiempo mostrar todos los registros, he buscado como poner un loader pero no me funciona correctamente.
Buscando algunos demos en internet hay un loader que si lo carga , pero se queda ahi y jamas muestra el datatable.
Con este script se pretende que al momento que termine de cargar los datos, deje de mostrar el circulo girando.
<script type="text/javascript">
$(window).on('load', function () {
$(".loader-page").css({visibility:"hidden",opacity:"0"})
},
});
</script>
Este es el CSS y si funciona muestra un circulo girando y dentro de este el gif.
.loader-page {
position: fixed;
z-index: 25000;
background: url('../imagenes/loader/ajax-loader.gif') 50% 50% no-repeat rgb(249,249,249);
/*background: rgb(255, 255, 255);*/
left: 0px;
top: 0px;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
transition:all .3s ease;
}
.loader-page::before {
content: "";
position: absolute;
border: 2px solid rgb(50, 150, 176);
width: 60px;
height: 60px;
border-radius: 50%;
box-sizing: border-box;
border-left: 2px solid rgba(50, 150, 176,0);
border-top: 2px solid rgba(50, 150, 176,0);
animation: rotarload 1s linear infinite;
transform: rotate(0deg);
}
@keyframes rotarload {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
.loader-page::after {
content: "";
position: absolute;
border: 2px solid rgba(50, 150, 176,.5);
width: 60px;
height: 60px;
border-radius: 50%;
box-sizing: border-box;
border-left: 2px solid rgba(50, 150, 176, 0);
border-top: 2px solid rgba(50, 150, 176, 0);
animation: rotarload 1s ease-out infinite;
transform: rotate(0deg);
}
Para no poner todo el Datatable solo añadi las lineas en donde se coloca el div que mostrara el loader no importa donde ponga el <div> no funciona se queda la pantalla en blanco.
<div class="container-fluid">
<div class="DataTables_sort_wrapper">
<div class="loader-page"></div> <<<---- Muestra la animación de un circulo girando y dentro de este otra imagen.
Hay forma de hacer que se muestre el loader durante el tiempo que tarda en cargar los datos...
Saludos