Staff en línea

[Javascript] Barra de progreso Youtube metodo 2
Tema iniciado por y Añadir a favoritos

Mensaje  Chalo
[codebox][/codebox]
[hidecode]
Código:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$( document ).ready(function() {
$({property: 0}).animate({property: 105}, {
    duration: 4000,
    step: function() {
        var _percent = Math.round(this.property);
        $('#progress').css('width',  _percent+"%");
        if(_percent == 105) {
            $("#progress").addClass("done");
        }
    },
    complete: function() {
        alert('complete');
    }
});
});
</script>
<style>
#progress {
    position:fixed;
    z-index:2147483647;
    top:0;
    left:-6px;
    width:0%;
    height:2px;
    background:#b91f1f;
    -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.done {
    opacity:0
}
#progress dd,#progress dt {
    position:absolute;
    top:0;
    height:2px;
    -moz-box-shadow:#b91f1f 1px 0 6px 1px;
    -ms-box-shadow:#b91f1f 1px 0 6px 1px;
    -webkit-box-shadow:#b91f1f 1px 0 6px 1px;
    box-shadow:#b91f1f 1px 0 6px 1px;
    -moz-border-radius:100%;
    -webkit-border-radius:100%;
    border-radius:100%
}
#progress dd {
    opacity:1;
    width:20px;
    right:0;
    clip:rect(-6px,22px,14px,10px)
}
#progress dt {
    opacity:1;
    width:180px;
    right:-80px;
    clip:rect(-6px,90px,14px,-6px)
}
@-moz-keyframes pulse {
    30% {
        opacity:1
    }
    60% {
        opacity:0
    }
    100% {
        opacity:1
    }
}
@-ms-keyframes pulse {
    30% {
        opacity:.6
    }
    60% {
        opacity:0
    }
    100% {
        opacity:.6
    }
}
@-o-keyframes pulse {
    30% {
        opacity:1
    }
    60% {
        opacity:0
    }
    100% {
        opacity:1
    }
}
@-webkit-keyframes pulse {
    30% {
        opacity:.6
    }
    60% {
        opacity:0
    }
    100% {
        opacity:.6
    }
}
@keyframes pulse {
    30% {
        opacity:1
    }
    60% {
        opacity:0
    }
    100% {
        opacity:1
    }
}
#progress.waiting dd,#progress.waiting dt {
    -moz-animation:pulse 2s ease-out 0s infinite;
    -ms-animation:pulse 2s ease-out 0s infinite;
    -o-animation:pulse 2s ease-out 0s infinite;
    -webkit-animation:pulse 2s ease-out 0s infinite;
    animation:pulse 2s ease-out 0s infinite
}
</style>
<div id="progress" class="waiting">
    <dt></dt>
    <dd></dd>         
</div>
[/hidecode]
staff
Chalo
avatar

¿Que estoy pensando? :

los dias de ocio son geniales [table class=fecha_up][td]Se modifico:13/12/17 - 11:40 hrs. [/td][/table]


Banner en temas :

http://i.imgur.com/XlCMsAOh.jpeg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6465


Puntos :

8477


Me gusta :

967


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


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

Volver arriba Ir abajo

Mensaje  CD"MA
Comento para ver..
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

Mensaje  Faxter
Comento para ver
staff
Faxter
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://img05.deviantart.net/f3c4/i/2016/256/3/3/izuku_midoriya___bakugou_katsuki_by_faxterd-dahjpvi.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #333


Mensajes :

282


Puntos :

468


Me gusta :

78


ingreso :

15/02/2015


Sexo :

Masculino

Plataforma :

punBB


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Veamos como queda con este metodo :v
Julinho
avatar

¿Que estoy pensando? :

buen inicio de semana :) [table class=fecha_up][td]Se modifico:4/12/17 - 13:45 hrs. [/td][/table]


Banner en temas :

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


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

114


Puntos :

149


Me gusta :

21


ingreso :

05/02/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario http://4reyes.foroactivo.com/

Volver arriba Ir abajo

comento para ver que tal
Beautygirl

¿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 :

https://s-media-cache-ak0.pinimg.com/736x/25/9e/86/259e867eb8d4ca92c733d6246e846083.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

77


Puntos :

100


Me gusta :

13


ingreso :

12/05/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Mensaje  Roger
veamos el code, pongan un demo
Roger
avatar

¿Que estoy pensando? :

Probando el status del foro [table class=fecha_up][td]Se modifico:9/03/17 - 9:13 hrs.[/td][/table]


Banner en temas :

http://thedesigninspiration.com/wp-content/uploads/2012/06/Facebook-Covers-029.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

300


Puntos :

334


Me gusta :

26


ingreso :

30/03/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Mensaje  Zabb
comento para ver el codigo
Zabb
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://i64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

17


Puntos :

19


Me gusta :

2


ingreso :

22/11/2016


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Mensaje  Zabb
:c no puedo ver nada
Zabb
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://i64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

17


Puntos :

19


Me gusta :

2


ingreso :

22/11/2016


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.