Barras de progreso animadas con MooTools: dwProgressBar -

Me encantan las barras de progreso. Es importante que sepa aproximadamente qué porcentaje de una tarea está completa. Crea una clase de barra de progreso de MooTools altamente personalizable que se anima al porcentaje deseado.

Descargar

El XHTML generado por Moo

divdiv/div/divdiv{x}%/div

Esta estructura DIV es extremadamente simple y puede controlarse completamente mediante CSS.

El CSS

/* estos nombres de selector se basan en lo que usted proporciona a la clase *//* ejemplo 1 */#box{ border:1px solid #ccc; ancho: 200 px; altura: 20 píxeles; }#perc{ fondo:#ccc; altura: 20 píxeles; }/* ejemplo 2 */#box2{ background:url(progress-bar-back.gif) centro derecha sin repetición; ancho: 200 px; altura: 20 píxeles; flotador izquierdo; }#perc2{ fondo:url(progress-bar.gif) centro derecha sin repetición; altura: 20 píxeles; }#text{ familia de fuentes:tahoma, arial, sans-serif; tamaño de fuente: 11px; color:#000; flotador izquierdo; relleno: 3px 0 0 10px; }

Declararás estilos para los tres elementos XHTML generados. Te gustará usar colores de fondo e imágenes de fondo. También querrás definir un valor de ancho para el cuadro exterior.

JavaScript de MooTools: dwProgressBar

//la clase es invar dwProgressBar = new Class({//implementsImplements: [Options],//optionsoptions: {container: $$('body')[0],boxID:'',percentageID:'',displayID: ' ',startPercentage: 0,displayText: false,speed:10},//initializationinitialize: function(options) {//set optionsthis.setOptions(options);//crea elementosthis.createElements();},//crea el cuadro y elementos de porcentajecreateElements: function() {var box = new Element('div', { id:this.options.boxID });var perc = new Element('div', { id:this.options.percentageID, 'style ':'ancho:0px;' });perc.inject(box);box.inject(this.options.container);if(this.options.displayText) { var texto = nuevo elemento('div', { id :this.options.displayID });text.inject(this.options.container);}this.set(this.options.startPercentage);},//calcula el ancho en píxeles a partir del porcentajecalculate: function( porcentaje) {return ( $(this.options.boxID).getStyle('width').replace('px','') * (percentage / 100)).toInt();},//anima el cambio en porcentajeanimate: function(to ) {$(this.options.percentageID).set('morph', { duración: this.options.speed, enlace:'cancel' }).morph({width:this.calculate(to. toInt())} );if(this.options.displayText) { $(this.options.displayID).set('text', to.toInt() + '%'); }},//establece el porcentaje desde su estado actual al porcentaje deseado: function(to) {this.animate(to);}});

La clase acepta las siguientes opciones:

• contenedor: elemento en el que se coloca toda la barra de progreso
• boxID: el ID de la barra de progreso que contiene DIV
• percentID: el ID del DIV animado/deslizante de la barra de progreso
• displayID: el ID del texto DIV “{x} %” de la barra de progreso
• startPercentage: el porcentaje en el que desea que comience la barra de progreso (el valor predeterminado es 0)
• texto en pantalla: booleano. ¿Quieres que la barra de progreso también muestre el porcentaje en formato de texto?
• velocidad: velocidad de la animación porcentaje al dado

Uso de MooTools

//una vez que el DOM esté listowindow.addEvent('domready', function() {/* crea la barra de progreso, por ejemplo 1 */pb = new dwProgressBar({container: $('put-bar-here' ),startPercentage: 25,speed:1000,boxID: 'box',percentageID: 'perc'});/* crea la barra de progreso, por ejemplo 2 */pb2 = new dwProgressBar({container: $('put- bar-here2'), startPercentage: 10,speed:1000,boxID: 'box2',percentageID: 'perc2',displayID: 'text',displayText: true});/* mueve la primera barra de progreso al 55% * /pb.set(55) ;/* mueve la segunda barra de progreso al 89% */pb2.set(89);});

Todo lo que necesita hacer es crear una instancia de dwProgressBar y pasar las opciones deseadas. Es rápido y fácil. Para mover la barra de progreso, todo lo que necesitas hacer es llamar al método “set()”, pasándole el porcentaje deseado.

Usos prácticos

Podrías usar esta barra de progreso para:

• Un guión de precarga de imágenes.
• Seguimiento de finalización de formulario
• Aplicaciones internas de seguimiento de objetivos.
• ¡Todo lo que quieras!

Hice que la barra de progreso sea lo más flexible posible al permitir que el desarrollador formatee cada DIV generado usando CSS.

Descargar

Además, siéntase libre de hacer sugerencias para la clase. ¡Puedo implementarlos en el futuro!