Si somos observadores cada vez que entramos a YouTube, vemos una barra de progreso de carga roja ,en la parte superior de la página de izquierda a derecha. Para mi esta super bien.
Y te preguntas ...?... ¿Esto seria posible ponerlo en mi blogs de Blogger?...la respuesta es por supuesto que sí.
Es un javascript para progreso de barra igual que YouTube y bueno no requiere de jquery con tamaño muy pequeño , así que no te preocupes que no sobre cargara tu blogs de blogger. Mas bien dará un aspecto muy elegante a tu blog.
Ahora vamos a ponerlo en nuestro blogs a continuación: Solamente vas a hacer un paso...
Coloca este codigo por Encima de la etiqueta : </body>
<script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"2px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width=
a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#db3131";this.bars=[];b=this.el=document.createElement("div");c(this.el,
k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}();
var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100);
//]]>
</script>
Ahora si deseas cambiarlo el grosor de la barra de progreso :
height:"2px"
Si deseas cambiar el color rojo por otro busca este código :
a.bg=a.bg| | "#db3131"
Osea cambialo esto : #db3131 por otro color que deseas ponerlo.
Fuente | DanyDanielRT