Crear Spinner de carga animada con JavaScript puro y CSS3-Fast Spinner
| Autor: | toke182 |
|---|---|
| Views Total: | 4,285 |
| Sitio oficial: | Ir a la web |
| Actualizado: | December 3, 2014 |
| Licencia: | MIT |
Vista prévia
Descripción
Fast Spinner es una sencilla y rápida biblioteca de JS para crear Spinners de carga animados y altamente personalizables para visualizar el progreso de la carga. Animado con animaciones CSS3, transforma y @keyframes.
Funcionamiento
Cargue el Fast-Spinner. CSS en el encabezado y el Fast-Spinner . js en el pie de página.
<link rel="stylesheet" href="fast-spinner.css"> <script src="fast-spinner.js"></script>
Cree un elemento DIV vacío que se servirá como el contenedor de Spinner.
<div class="spinnerContainer" id="demo"></div>
El código JavaScript para crear un Spinner de carga básica en el contenedor DIV que acaba de crearse.
var p1 = new fastSpinner({
"id": "demo",
"color": "red",
"colorPattern": ["blue", "red", "green", "yellow"],
"hide": false
}); Quite un Spinner de carga después de un tiempo de espera.
setTimeout(function(){p1.remove()}, 5000);
