Barra de progreso radial animada en JavaScript-ToxProgress. js
| Autor: | ToxSickCoder |
|---|---|
| Views Total: | 4,167 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 28, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
ToxProgress. js es una biblioteca de JavaScript ligera que hace uso de HTML/CSS sin formato para crear barras de progreso circulares (radiales) animadas con varias opciones de personalización útiles.
Funcionamiento
Cargue el JavaScript ' ToxProgress. js ' y CSS ' ToxProgress. css ' en el archivo HTML.
<link href="css/tox-progress.css" rel="stylesheet"> <script src="js/tox-progress.js"></script>
Cree la estructura HTML y config la barra de progreso radial usando los atributos de los "datos" como éstos:
- Data-size = "180 ″: tamaño del círculo
- Data-thickness = "12 ″: espesor
- Data-color = "#229922 ″: color de círculo
- Data-background = "#ffffff": color de fondo
- Data-Progress = "25 ″: %
- Data-Speed = "500 ″: velocidad de animación
<div class="tox-progress" data-size="180" data-thickness="12" data-color="#229922" data-background="#ffffff" data-progress="25" data-speed="500"> <div class="tox-progress-content" data-vcenter="true"> Progress content here </div> </div>
Inicializar la barra de progreso radial.
ToxProgress.create();
Anime la barra de progreso radial.
ToxProgress.animate();
