Staff en línea

Página 1 de 2. 1, 2  Siguiente

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

[Javascript] Barra de progreso como youtube 
el Dom Nov 02, 2014 11:32 pm
staff


Última edición por Chalo el Dom Mayo 24, 2015 5:34 pm, editado 3 veces
[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]
Chalo
avatar

¿Que estoy pensando? :

Bienvenidosss!!! [table class=fecha_up][td]Se modifico:11/01/18 - 12:23 hrs. [/td][/table]


Banner en temas :

https://orig00.deviantart.net/2c56/f/2016/271/3/4/overwatch___mccree___facebookcover_by_beanousme-da03g04.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6513


Puntos :

8544


Me gusta :

984


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario http://www.opensourcephpbb3.com

Volver arriba Ir abajo

BUen recurso, saludos!
mrsrz
avatar

¿Que estoy pensando? :

... [table class=fecha_up][td]Se modifico:25/11/16 - 19:20 hrs.[/td][/table]


Banner en temas :

http://profilerehab.com/facebook_covers/musical/cool_guitar_cover_9.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

420


Puntos :

589


Me gusta :

61


ingreso :

23/12/2014


Sexo :

Masculino

Plataforma :

PunBB


Navegador :

Chrome


Ver perfil de usuario http://musicinstant.host-es.com/

Volver arriba Ir abajo

Muy bueno, gracias chalo!
fededz
avatar

¿Que estoy pensando? :

test [table class=fecha_up][td]Se modifico:10/01/16 - 16:28 hrs.[/td][/table]


Banner en temas :

http://i.imgur.com/dAniRv0.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

21


Puntos :

37


Me gusta :

10


ingreso :

14/12/2014


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Prueba a ver si me sirve
N3tl0rD_KinG
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://fbcoversking.com/wp-content/uploads/2012/01/waves-of-colour-facebook-cover.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

49


Puntos :

65


Me gusta :

12


ingreso :

07/02/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

veamos pues que es esto, podriais poner imagenes de ejemplo para tener una idea de que se trata y para que sirve..gracias.
arsenico
avatar

¿Que estoy pensando? :

Baneado del foro [table class=fecha_up][td]Se modifico:12/12/15 - 18:20 hrs.[/td][/table]


Banner en temas :

http://www.pagecovers.com/covers/electronic_music/music_drum_bass_beats.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

361


Puntos :

495


Me gusta :

52


ingreso :

10/03/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

firefox


Ver perfil de usuario http://losslesscity.foroactivo.com/

Volver arriba Ir abajo

gracias
arsenico
avatar

¿Que estoy pensando? :

Baneado del foro [table class=fecha_up][td]Se modifico:12/12/15 - 18:20 hrs.[/td][/table]


Banner en temas :

http://www.pagecovers.com/covers/electronic_music/music_drum_bass_beats.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

361


Puntos :

495


Me gusta :

52


ingreso :

10/03/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

firefox


Ver perfil de usuario http://losslesscity.foroactivo.com/

Volver arriba Ir abajo

no se me abre el codigo
arsenico
avatar

¿Que estoy pensando? :

Baneado del foro [table class=fecha_up][td]Se modifico:12/12/15 - 18:20 hrs.[/td][/table]


Banner en temas :

http://www.pagecovers.com/covers/electronic_music/music_drum_bass_beats.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

361


Puntos :

495


Me gusta :

52


ingreso :

10/03/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

firefox


Ver perfil de usuario http://losslesscity.foroactivo.com/

Volver arriba Ir abajo

staff
@arsenico escribió:[quotelink="/t74-javascript-barra-de-progreso-como-youtube#1596"]
no se me abre el codigo

[ok]Para ver los códigos hay que tener 6 comentarios en el foro[/ok]
@arsenico,
Chalo
avatar

¿Que estoy pensando? :

Bienvenidosss!!! [table class=fecha_up][td]Se modifico:11/01/18 - 12:23 hrs. [/td][/table]


Banner en temas :

https://orig00.deviantart.net/2c56/f/2016/271/3/4/overwatch___mccree___facebookcover_by_beanousme-da03g04.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6513


Puntos :

8544


Me gusta :

984


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario http://www.opensourcephpbb3.com

Volver arriba Ir abajo

Gracias
Fusilet
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://fbcoversking.com/wp-content/uploads/2012/01/waves-of-colour-facebook-cover.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

43


Puntos :

58


Me gusta :

5


ingreso :

05/05/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Vamos a usar este codigo haber como es
CD"MA
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://www.covermyfb.com/media/covers/thumb/15699-dj-spinning-music.jpg


Color de titulos :

red


Sombra titulo :

1px 1px 1px #ccc


Mensajes :

336


Puntos :

472


Me gusta :

44


ingreso :

16/05/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.