Foros del Web » Creando para Internet » HTML »

Armado de elementos

Estas en el tema de Armado de elementos en el foro de HTML en Foros del Web. Estimados quisiera pedir su ayuda. encontré este elemento que quisiera usar. https://jsfiddle.net/kimmobrunfeldt/dnLLgm5o/ pero no puedo hacer la animación tengo un archivo html tengo el estilo ...
  #1 (permalink)  
Antiguo 17/12/2016, 15:57
 
Fecha de Ingreso: noviembre-2010
Ubicación: chile,santiago
Mensajes: 101
Antigüedad: 12 años
Puntos: 1
Pregunta Armado de elementos

Estimados quisiera pedir su ayuda. encontré este elemento que quisiera usar.

https://jsfiddle.net/kimmobrunfeldt/dnLLgm5o/

pero no puedo hacer la animación

tengo un archivo html tengo el estilo y estoy llamando al js que dice la instrucción pero no me funciona solo se ve el corazón completo sin hacer la animación. agradezco cualquier ayuda de ante mano gracias
  #2 (permalink)  
Antiguo 17/12/2016, 20:02
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 19 años, 8 meses
Puntos: 1826
Respuesta: Armado de elementos

No sé si notaste que está llamando a un JS externo, llamado progressbar.js
  #3 (permalink)  
Antiguo 17/12/2016, 21:29
 
Fecha de Ingreso: noviembre-2010
Ubicación: chile,santiago
Mensajes: 101
Antigüedad: 12 años
Puntos: 1
Respuesta: Armado de elementos

si, lo estoy llamando tambien en el codigo. aun asi nada
  #4 (permalink)  
Antiguo 19/12/2016, 07:53
Avatar de Ito79  
Fecha de Ingreso: diciembre-2013
Mensajes: 71
Antigüedad: 9 años
Puntos: 18
Respuesta: Armado de elementos

Hola edotropic,
Creo que es mejor que nos pongas el .html/.css/.js que tienes ahora para ver dónde puede estar el error.

Un saludo
// Ito
  #5 (permalink)  
Antiguo 19/12/2016, 11:06
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 8 años
Puntos: 91
Respuesta: Armado de elementos

yo creo que no lo estabas poniendo bien, yo probe un codigo y si me sirvio, prueba el codigo ;)

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <meta charset="UTF-8">
  4.     <title>Document</title>
  5.     <style type="text/css">
  6.         #container {
  7.           margin: 20px;
  8.           width: 200px;
  9.           height: 200px;
  10.         }
  11.  
  12.     </style>
  13. </head>
  14. <div id="container">
  15.   <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100">
  16.     <path fill-opacity="0" stroke-width="1" stroke="#bbb" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923  C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  C99.387,33.883,93.598,19.539,81.495,13.923z"
  17.    />
  18.     <path id="heart-path" fill-opacity="0" stroke-width="3" stroke="#ED6A5A" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923  C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  C99.387,33.883,93.598,19.539,81.495,13.923z"
  19.    />
  20.   </svg>
  21. </div>
  22.  
  23. <script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
  24. <script type="text/javascript">
  25. // [email protected] version is used
  26. // Docs: http://progressbarjs.readthedocs.org/en/1.0.0/
  27.  
  28. var bar = new ProgressBar.Path('#heart-path', {
  29.   easing: 'easeInOut',
  30.   duration: 1400
  31. });
  32.  
  33. bar.set(0);
  34. bar.animate(1.0);  // Number from 0.0 to 1.0
  35. </body>
  36. </html>

Etiquetas: armado, elementos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 02:32.