进度条动态增长减少

css

.barControl {margin: 0 auto;}
.barContro_space {padding:1px;border-radius: 5px; border:1px #2f3f9c solid;}
.vader{border-radius: 4px;display: block;width: 0%;background-color: #59e8c1;}

html

<div class="progress" id="vaderSize" style="width: 90%;margin: 20px 20px 0 0;"></div>

js

$.fn.extend({ProgressBarWars: function(opciones) {
					var ProgressBarWars=this;
					var theidProgressBarWars=$(ProgressBarWars).attr("id");
					var styleUnique = Date.now();
                    var StringStyle="";
					
					defaults = {
					porcentaje:"100",
					tiempo:1000,
					color:"",
					estilo:"yoda",
					tamanio:"30%",
					alto:"6px"
					}
					
					var opciones = $.extend({}, defaults, opciones);
					if(opciones.color!='')
					{
						StringStyle="";opciones.estilo="color"+styleUnique;}
					$(ProgressBarWars).before(StringStyle);
	                if(opciones.flag){
					$(ProgressBarWars).append('+opciones.tamanio+';">
+opciones.estilo+'" style="height: '+opciones.alto+';"  id="bar'+theidProgressBarWars+'">');
	                }
			        $("#bar"+theidProgressBarWars).animate({width: opciones.porcentaje+"%"},opciones.tiempo);


					this.mover = function(ntamanio) {
					$("#bar"+$(this).attr("id")).animate({width:ntamanio+"%"},opciones.tiempo);
					};
	return this;			 
	}
});

使用

   <script>
            var number = 30;
            $(function () {
                $("#vaderSize").ProgressBarWars({ porcentaje: 30, estilo: "vader", tiempo: 5980, alto: "8px", flag: true });
                setInterval(function () {
                    number = Math.floor(Math.random() * 99 + 1);
                    $("#vaderSize").ProgressBarWars({ porcentaje: number, estilo: "vader", tiempo: 5980, alto: "30px", flag: false });
                }, 5000);
            });
        </script>