Uncaught error: container does not exist.

amitrsingh1992 commented 7 years ago

I was working on the example provided on jsfiddle and I came across ur example on circular progress bar http://jsfiddle.net/szev5syq/ while running this code its showing the error as "Uncaught Error: Container does not exist: #bar ". Whereas it working fine on jsfiddle and I am running it on chrome browser

fantomtracks commented 7 years ago

I think it just because progressbar.js just work with ID. You don't have to write the '#' (jquery like) before your selector. Try this :

<div class="wrapper">
    <img src="http://static.iltalehti.fi/terveys/kippari_etu2250612PP_tr.jpg" />
    <div id="bar"></div>
</div>

var circle = new ProgressBar.Circle('bar', {
    strokeWidth: 3,
    color: '#000'
});
circle.animate(1);

amitrsingh1992 commented 7 years ago

still issue persist.I am getting this error

Uncaught Error: Container does not exist: bar at Circle.Shape (progressbar.js:2050) at new Circle (progressbar.js:1674) at dummy.html:34

i.e just instead of #bar now its showing bar

Here's my code ,hope to see positive response soon

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js" charset="utf-8"></script>
  <style media="screen">
    svg {
      width: 100%;
      display: block;
    }

    .wrapper {
      position: relative;
      width: 200px;
      height: 200px;
    }

    .wrapper> #bar,
    .wrapper> img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .wrapper> img {
      border-radius: 50%;
    }
  </style>
  <script type="text/javascript">
    var circle = new ProgressBar.Circle('bar', {
      strokeWidth: 3,
      color: '#000'

    });
    circle.animate(1);
  </script>
</head>

<body>
  <div class="wrapper">
    <img src="http://static.iltalehti.fi/terveys/kippari_etu2250612PP_tr.jpg" />
    <div id="bar"></div>
  </div>
</body>

</html>

amitrsingh1992 commented 7 years ago

I made a silly mistake that calling js before dom element get created. Just had to move that script either after body part of maybe or onload event.

JuanCarlosARSW commented 7 years ago

I was trying this way and it was successful.

<div id="bar"></div>

var id = 'bar';
var bar = new ProgressBar.Circle(document.getElementById(id), {
    strokeWidth: 2,
    easing: 'easeInOut',
    duration: 1400,
    color: '#FFEA82',
    trailColor: '#eee',
    trailWidth: 1,
    svgStyle: null
  });
bar.animate(0.5);  // Number from 0.0 to 1.0

taccarlo commented 1 month ago

Immagine 2024-09-26 143811 This is the check that the library does and cause the error, so i find more appropriate to invoke document.querySelector() instead

kimmobrunfeldt / progressbar.js

Uncaught error: container does not exist. #180