[Javascript] Barra de progreso como youtube
Tema iniciado por y Añadir a favoritosResuelto

17/04/2014

Recuerdo del primer mensaje :

[codebox]Barra de progreso como en Youtube[/codebox]

[hidecode]

Código:: #progress { position: fixed; z-index: 2147483647; top: 0; left: -6px; width: 1%; height: 2px; background: #0088CC; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; -moz-transition: width 500ms ease-out,opacity 400ms linear; -ms-transition: width 500ms ease-out,opacity 400ms linear; -o-transition: width 500ms ease-out,opacity 400ms linear; -webkit-transition: width 500ms ease-out,opacity 400ms linear; transition: width 500ms ease-out,opacity 400ms linear; } #progress dd, #progress dt { position: absolute; top: 0; height: 2px; -moz-box-shadow: #0088CC 1px 0 6px 1px; -ms-box-shadow: #0088CC 1px 0 6px 1px; -webkit-box-shadow: #0088CC 1px 0 6px 1px; box-shadow: #0088CC 1px 0 6px 1px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; } #progress dt { opacity: .6; width: 180px; right: -80px; clip: rect(-6px,90px,14px,-6px); } #progress dd { opacity: .6; width: 20px; right: 0; clip: rect(-6px,22px,14px,10px); }

Código:: jQuery(document).ready(function() { jQuery("body").append(jQuery("<div><dt/><dd/></div>").attr("id", "progress")); jQuery("#progress").width(100+ "%"); jQuery("#progress").width("101%").delay(800).fadeOut(400, function() { jQuery(this).remove(); }); });

[/hidecode]

15/02/2015

A ver cual queda mejor

17/04/2014

@Faxter ya quedo

15/02/2015

A ver

05/02/2015

Codigo muy pro se agradece! xD

26/06/2015

posteo para ver que tal esa barra :3

23/12/2014

Respondo para observar. si? jaja

22/11/2016

a ver como es este codex

22/11/2016

es muy bueno y me ha servido

22/11/2016

a ver como es quizas m guste

22/11/2016

no logro ver el codigo, aun teniendo los 6 mensajes.

[Javascript] Barra de progreso como youtubeTema iniciado por y Añadir a favoritosResuelto