Biblioteca de barras de progreso circular de & horizontal mínima-ProgressBar. js

Vista prévia

Descripción

Se trata de una pequeña biblioteca de JavaScript para crear barras de progreso horizontales circulares y/o superiores animadas con el < a href = "https://github.com/tweenjs/tween.js" target = "_ blank" rel = "noopener" > Tween. js biblioteca.

Funcionamiento

Cargue los archivos Tween. js y ProgressBar. js necesarios en el documento.

<script src="/path/to/Tween.js"></script>
<script src="/path/to/progressBar.js"></script>

Cree una barra de progreso horizontal que se muestre en la parte superior de la Página Web.

<div class="progress"></div>

let topProgress = new progressBar({


type: "top",


targetClass: "progress",


value: 100,


 duration: 2000,


completeDuration: 500
 });

Cree una barra de progreso circular con visualización porcentual.

<div class="text">0%</div>
<div class="svg">

<svg height="100%" width="100%">


<circle class="round-progress" cx="50" cy="50" r="45" />

</svg>
</div>

let circleProgress = new progressBar({


type: "circle", //top, circle


targetClass: "round-progress",


textClass: "text",


value: 100,


 duration: 2000,


 completeDuration: 500
 });

Aplique sus propios estilos CSS a las barras de progreso.

.progress {

position: absolute;

top: 0;

left: 0;

width: 0;

height: 3px;

background: #29d;

box-shadow: 0 0 3px #29d;
}

.text {

position: absolute;

top: 50%;

left: 50%;

color: #000;

border: none;

width: 100px;

height: 100px;

margin-top: -50px;

margin-left: -50px;

text-align: center;

line-height: 100px;
}

.round-progress {

fill: none;

stroke: #29d;

stroke-width: 5;

stroke-dasharray: 1000;
}

.svg {

position: absolute;

top: 50%;

left: 50%;

width: 100px;

height: 100px;

margin-top: -50px;

margin-left: -50px;

transform: rotate(-90deg);
}

Todas las opciones de configuración predeterminadas.

{

type: "top", //top, circle

targetClass: "progress",

textClass: "text",

value: 100,

 duration: 1000, //ms

completeDuration: 500, //ms

circle: {



r: 45

}
}