Dibuja círculos animados desde un ángulo determinado o un valor-Circles. js
| Autor: | SuicV |
|---|---|
| Views Total: | 183 |
| Sitio oficial: | Ir a la web |
| Actualizado: | March 5, 2019 |
| Licencia: | GPL-3.0 |
Vista prévia
Descripción
Circles. js es un plugin de JavaScript vainilla que se utiliza para dibujar círculos animados, amigables con el móvil desde un ángulo dado o un valor porcentual usando Canvas.
Ideal para barra de progreso, indicador de carga, temporizador de cuenta regresiva, cronómetro y mucho más.
Funcionamiento
Descargue e importe la biblioteca Circles. js.
<script src="circles.js"></script>
Cree un elemento canvas de HTML5 en el que desee dibujar el círculo.
<canvas id="example"></canvas>
Dibuje un círculo a partir de un valor porcentual determinado (90%).
new Circle(document.querySelector("#example"),{
//set type of value which the circle will present
valueType : PERC,
//set max value
maxValue : 100
},90).startDrawing(); Dibuje un contador numérico que rellene el arco después de init.
new Circle(document.querySelector("#example"),{
valueType : NUMB,
maxAngle : (240) ,
maxValue : 10000
},9090).startDrawing(); Dibuja un cronómetro.
new Circle(document.querySelector("#example"),{
valueType:TIME,
maxValue : STimeToTimeStamp("00:05:10"),
withValue:true,
withAnimation : true,
animationDuration : STimeToTimeStamp("00:01:05")*1000
}, STimeToTimeStamp("00:01:05"));
