ProgressBar personalizable simple en Vanilla JavaScript-easyBar

Vista prévia

Descripción

easyBar es un componente de barra de progreso pequeño, fácil, pero altamente personalizable escrito en vainilla JavaScript.

See also:

• Top 10 JavaScript & componentes de la barra de progreso CSS

Características

• Animación suave.
• Imagen del indicador de progreso personalizado.
• Eventos de desencadenador personalizados.
• Color de fondo/imagen personalizado.
• Permite establecer los valores Min/Max.

¿Cómo funciona?

Inserte la versión minimizada del easyBar en el documento.

<link rel="stylesheet" href="dist/css/easybar.min.css">
<script src="dist/js/easybar.min.js"></script>

Cree un contenedor DIV para mantener la barra de progreso.

<div class="easybar" id="example"></div>

Cree una nueva barra de progreso y establezca los valores porcentuales actuales/máximos.

var instance = {


selector: '#example',


value: 3,


maxValue: 10
}

Personaliza la apariencia de la barra de progreso.

var instance = {


selector: '#example',


value: 3,


maxValue: 10,


height: '20px',


backgroundColour: '#f1f1f1',


backgroundImage: '',


barColour: '#3B5998',


barImage: '',


wrapperWidth: '50%',


wrapperPadding: '20px',


image: '',


imageHeight: '50',


imageWidth: '50',


borderRadius: '0',


imagePercentageOffsetX: 0
}

Personaliza la animación de progreso.

var instance = {


selector: '#example',


value: 3,


maxValue: 10,


transitionDuration: 1500,


transitionDelay: '400ms',


transitionProperty: 'width',


transitionTiming: 'linear'
}

Personalice el selector/evento de desencadenador.

var instance = {


selector: '#example',


value: 3,


maxValue: 10,


trigger: 'onPageLoad',


triggerSelector: ''
}