Barra de progreso de paso animado en JavaScript puro
| Autor: | tarunsingh |
|---|---|
| Views Total: | 8,056 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 24, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Una barra de progreso de JavaScript animado, receptivo y puro que se usa para indicar el paso/etapa actual en el que estás actualmente. Ideal para el Asistente de formularios de varios pasos.
Funcionamiento
Cargue la hoja de estilos principal en el encabezado de la Página Web.
<link href="css/main.css" rel="stylesheet" />
Crea un contenedor donde quieras colocar la barra de progreso.
<div class="progress-bar-wrapper"></div>
Coloque el archivo JavaScript principal en la parte inferior de la Página Web.
<script src="js/progress-bar.js"></script>
Inicialice la barra de progreso y configure los pasos completos y actuales.
ProgressBar.init( [ 'Request Submitted', 'Received Responses', 'Negotiation Done', 'Hired Professional', 'Service Completed' ], 'Hired Professional', 'progress-bar-wrapper' );
Podemos establecer retardo de animación como sigue en MS (por defecto 1000).
ProgressBar.singleStepAnimation = 1500;
