Armado de elementos

edotropic · #1 (**permalink**) 17/12/2016, 15:57

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

Rafael · #2 (**permalink**) 17/12/2016, 20:02

No sé si notaste que está llamando a un JS externo, llamado progressbar.js

edotropic · #3 (**permalink**) 17/12/2016, 21:29

si, lo estoy llamando tambien en el codigo. aun asi nada

Ito79 · #4 (**permalink**) 19/12/2016, 07:53

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

AngelKrak · #5 (**permalink**) 19/12/2016, 11:06

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

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #container {
          margin: 20px;
          width: 200px;
          height: 200px;
        }
 
    </style>
</head>
<body>
<div id="container">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100">
    <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"
    />
    <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"
    />
  </svg>
</div>
 
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<script type="text/javascript">
// [email protected] version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/
 
var bar = new ProgressBar.Path('#heart-path', {
  easing: 'easeInOut',
  duration: 1400
});
 
bar.set(0);
bar.animate(1.0);  // Number from 0.0 to 1.0
</script>
</body>
</html>