A+
A-
Barra de progreso

Una de las tendencias actuales que podemos ver actualmente en varias webs es la de indicar a través de una barra de progreso en la parte superior lo que lleva leído el usuario.

Lo podemos ver en distintas webs y hemos decidido hacer un tutorial de cómo implementarlo.

Si os fijáis a medida que hacemos scroll dentro de una página (lo podéis apreciar aquí mismo), aparece un indicador o barra de progreso en la parte superior que nos está orientando de modo visual lo que llevamos leído.

Desde Te interesa saber siempre nos ha gustado este tipo de recursos que apenas se nota en el código de nuestra plantilla, además de ser 100% responsive.

Para implementarlo os vamos a dar su código completo y el lugar en el que tenéis que ponerlo. El código es bastante reducido y desde luego que de ninguna manera ralentizará la carga de vuestra web.

Para ello simplemente tenéis que seguir los pasos que os damos a continuación.

Sugerencia: Para encontrar rápidamente un código o texto, en la plantilla, pulsa Ctrl+F o ?-F (Mac) y utiliza la barra de búsqueda.

Buscamos la etiqueta: </head> y justo encima de ella pegamos este script:

<script type='text/javascript'>
//<![CDATA[
(function($) {
$.fn.prognroll = function(options) {
var settings = $.extend(options);
return this.each(function() {
if ($(this).data('prognroll')) {
return false;
}
$(this).data('prognroll', true);
var $span = $("<span>", {
class: "bar"
});
$("body").prepend($span);
$span.css({
position: "fixed",
top: 0,
left: 0,
width: 0,
height: settings.height,
backgroundColor: settings.color,
zIndex: 9999999
});
if (settings.custom === false) {
$(window).scroll(function(e) {
e.preventDefault();
var windowScrollTop = $(window).scrollTop();
var windowHeight = $(window).outerHeight();
var bodyHeight = $(document).height();
var total = (windowScrollTop / (bodyHeight - windowHeight)) * 100;
$(".bar").css("width", total + "%");
});
} else {
$(this).scroll(function(e) {
e.preventDefault();
var customScrollTop = $(this).scrollTop();
var customHeight = $(this).outerHeight();
var customScrollHeight = $(this).prop("scrollHeight");
var total = (customScrollTop / (customScrollHeight - customHeight)) * 100;
$(".bar").css("width", total + "%");
});
}
$(window).on('hashchange', function(e) {
e.preventDefault();
console.log($(window).scrollTop());
});
$(window).trigger('hashchange');
var windowScrollTop = $(window).scrollTop();
var windowHeight = $(window).outerHeight();
var bodyHeight = $("body").outerHeight();
var total = (windowScrollTop / (bodyHeight - windowHeight)) * 100;
$(".bar").css("width", total + "%");
});
};
})(jQuery);
//]]>
</script>

Ahora buscamos: </body> y también encima de ella pegamos este otro código:

<script type='text/javascript'>//<![CDATA[
$("body").prognroll({height:5,color:"#a91c22",custom:false});
//]]></script>

De esta manera tan sencilla la barra de progreso ya debería de esta visible.


Si quieres modificar a tu gusto el color de la barra, puedes hacerlo cambiando los códigos marcados en azul (tabla de colores).

Una vez implementados los códigos haz vista previa y si todo funciona según lo esperado, puedes guardar Tema.

Importante: antes de hacer cualquier modificación en tu plantilla haz una copia de la misma, por si surge cualquier problema que podamos restaurarla.

Algunas características:
* No afecta la velocidad de carga de tu blog.
* Compatible con distintos navegadores (Chrome, Firefox, Safari, IE, Opera, etc, etc).
* Da un estilo muy personal a tu blog.


Script: /* PrognRoll | https://mburakerman.github.io/prognroll/ | @mburakerman | License: MIT */
Modificación y personalización: Pedro PC

0 comentarios Google+ 0 Facebook

Nos puedes dejar un comentario, una opinión, o tu experiencia sobre este artículo. Queremos que participes, porque aquí tú eres el protagonista.



 
2013 - 2018 Te interesa saber



Política de privacidad




TiS, con tecnología Responsive Web Design y Blogger

Ir a inicio