Youtube loadingbar, cargador ajax estilo youtube

in #jquery6 years ago

Youtube loadingbar, cargador ajax estilo youtube, si lo que estas buscando es un cargador como el de youtube, tienes un gran plugin que te ayudara a lograr un loader que es prácticamente una línea roja que se muestra como distractor mientras la petición ajax carga, en el ejemplo se puede observar un botón que dice click Me de color rojo el cual realiza una petición de imágenes las cuales llegan posterior a una linea roja mostrada en la parte superior del sitio.

Demostración: http://www.thepetedesign.com/demos/youtube_loadingbar_demo.html

Este interesante plugin permite personalizar la petición ajax de tal forma que los parámetros de petición ajax pueden ser agregados como atributos a las etiquetas de enlace <a> proporcionando una manera mucho más sencilla de implementar en nuestras aplicaciones.


[html]

<a href="http://api.dribbble.com/players/jackietrananh/shots?callback=?"
data-datatype="json" data-type="GET" data-target="#frame">Click Me</a>

[/html]

Este plugin maneja varias opciones :

[javascript]
$(".ajax-call").loadingbar({
replaceURL: false, /* You can visibly change the URL of the browser to reflect the clicked links by toggling this to true. Default is false. May not work in old browsers. /
target: "#loadingbar-frame", /
The container's selector where you want the ajax result to appear. Default is #loadingbar-frame /
direction: "right", /
The direction where the the loading bar will progress. Default is right. */

/* Default Ajax Parameters. */
async: true,
complete: function(xhr, text) {},
cache: true,
error: function(xhr, text, e) {},
global: true,
headers: {},
statusCode: {},
success: function(data, text, xhr) {},
dataType: "html",
done: function(data) {}
});
[/javascript]

Enlace al repositorio github: https://github.com/peachananr/loading-bar

 

[adjuntos descripcion="Youtube loadingbar" link="github.com/peachananr/loading-bar/archive/master.zip"]


Posted from my blog with
SteemPress : http://develoteca.com/youtube-loadingbar-cargador-ajax-estilo-youtube/

Coin Marketplace

STEEM 0.26
TRX 0.20
JST 0.038
BTC 92730.79
ETH 3342.45
USDT 1.00
SBD 3.76