Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Ejemplos haciendo generando de barras con JavaScript y CSS
<div class="marco_barra">
<div class="barra_avance" style="width: 50%;">50%</div>
</div>
div.marco_barra, .ui-progressbar {
background: #282828;
border: 5px solid #BFBFBF;
width: 100%;
height: 30px;
padding: 0;
/* trataremos de poner las esquinas redondeadas */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
/* trataremos de poner sombras tanto internamente como externamente del marco de la barra de proceso */
-webkit-box-shadow:inset 2px 2px 5px #212121,inset -2px -2px 5px #000000,5px 5px 5px #CDDDE6;
-moz-box-shadow:inset 2px 2px 5px #212121,inset -2px -2px 5px #000000,5px 5px 5px #CDDDE6;
-ms-box-shadow:inset 2px 2px 5px #212121,inset -2px -2px 5px #000000,5px 5px 5px #CDDDE6;
-o-box-shadow: inset 2px 2px 5px #212121,inset -2px -2px 5px #000000,5px 5px 5px #CDDDE6;
box-shadow:inset 2px 2px 5px #212121,inset -2px -2px 5px #000000,5px 5px 5px #CDDDE6;
}
div.marco_barra div.barra_avance,
.ui-progressbar .ui-progressbar-value{
height: 28px;
/* agregamos el borde para que de un efecto de sobre-marco */
border:1px solid #365077;
border-top:1px solid #4BA3DE;
border-left:1px solid #4BA3DE;
/* trataremos de poner un fondo con un gradiente si no se puede lo pondra con un color solido */
background: #00A5D4;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(top, #00A5D4, #006C8B);
background-image: -ms-linear-gradient(top, #FF5000, #003364);
background-image: -webkit-gradient(linear, left top, left bottom, from(#FF5000), to(#003364));
background-image: -webkit-linear-gradient(top, #FF5000, #003364);
background-image: -o-linear-gradient(top, #FF5000, #003364);
background-image: linear-gradient(top, #FF5000, #003364);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF5000', endColorstr='#003364',GradientType=0 );
/* trataremos de poner las esquinas redondeadas */
-moz-border-radius:0 5px 5px 0;
-webkit-border-radius:0 5px 5px 0;
-o-border-radius:0 5px 5px 0;
border-radius:0 5px 5px 0;
/* Cuestiones relacionadas con la tipografia */
color: #000;
font-weight: bold;
font-size: 20px;
text-shadow: 1px 1px 1px #66CFED,-1px -1px 2px #23A1C5;
text-align: right;
}
<div class="marco_barra mini" style="width: 200px;">
<div class="barra_avance mini" style="width: 50%;">50%</div>
</div>
/* definicion para las barras minis */
div.mini{
border: 2px solid #BFBFBF;
height: 20px;
}
div.mini div.mini{
height: 18px;
font-weight: bold;
font-size: 1px;
-moz-border-radius:0 4px 4px 0;
-webkit-border-radius:0 4px 4px 0;
-o-border-radius:0 4px 4px 0;
border-radius:0 4px 4px 0;
}
/* definición para las barras animadas */
div.animada{ }
div.animada div.animada{
/* Ahora agregamos una imagen la cual se repite en el eje X*/
background: url(barra_animada.gif) repeat-x;
/* agregamos el borde para que de un efecto de sobre-marco */
border:1px solid #774D36;
border-top:1px solid #DE7B4B;
border-left:1px solid #DE7B4B;
/* Cuestiones relacionadas con la tipografia */
text-shadow: 1px 1px 1px #ED9E66,-1px -1px 2px #C55123;
}
<div class="marco_barra animada">
<div class="barra_avance animada" style="width: 50%;">50%</div>
</div>
<div class="marco_barra animada">
<div id="barra_animada_js" class="barra_avance animada" style="width: 50%;">50%</div>
</div>
/*Anima una barra */
function animarBarra(id, incremento, intervalo){
e = document.getElementById(id);
var val = parseInt(e.innerHTML) + parseInt(incremento);
if(val>100){
val=(incremento>0)? 0 : 100;
}else{
if(val<0){
val=(incremento<0)? 100 : 0;
}}
e.innerHTML = val+'%';
e.style.width = val+'%';
setTimeout("animarBarra('"+id+"', "+incremento+", "+intervalo+")", intervalo);
}
<script language="Javascript" type="text/javascript">
window.onload = function (){
animarBarra('barra_animada_js',10,200);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment