Indicador de ocupado mínimo con JavaScript y CSS3
| Autor: | lego12239 |
|---|---|
| Views Total: | 4,796 |
| Sitio oficial: | Ir a la web |
| Actualizado: | August 12, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Una biblioteca de JavaScript vainilla que utiliza CSS3 para crear un indicador animado de carga Spinner/ocupado mientras se carga algo en su página web.
Funcionamiento
Cargue los siguientes archivos JS y CSS en la Página Web.
<link rel="stylesheet" href="busy_indicator.css"> <script src="busy_indicator.js" type="text/javascript">
La estructura HTML para el indicador de ocupado.
<div id="busybox" class="bg"> <div></div> </div>
Estilo de la superposición de fondo cuando el indicador de ocupado está activo.
.bg {
display: none;
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 100;
background-color: rgba(30, 30, 30, 0.5);
} Inicializar el indicador de ocupado.
busyi = new busy_indicator(document.getElementById("busybox"),
document.querySelector("#busybox div")); Mostrar el indicador de ocupado.
busyi.show();
Oculte el indicador de ocupado.
busyi.hide();
