为什么进度条无法加载？

Question

The following code runs pretty well in jsfiddle and here in the snippet, but in the html file that I have the js code does not function and var bar = new ProgressBar.Line(container, does not operate.

Here is the link to my files: https://github.com/yzdnisr/js_problem

Any suggestions to solve this problem is welcome.

 var bar = new ProgressBar.Line(container, { strokeWidth: 4, easing: 'easeInOut', duration: 1400, color: '#FFEA82', trailColor: '#eee', trailWidth: 1, svgStyle: { width: '100%', height: '100%', position: 'absolute' } }); bar.animate(1.0); // Number from 0.0 to 1.0 

 #liner { position: relative; width: 600px; height: 7px; background-color: #000000; } #container { position: absolute; width: 400px; height: 7px; background-color: #f0f0f0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js"></script> <div id="liner"> <div id="container"></div> </div> 

Answer 1

Place your progress bar UI AFTER the reference to the progressbar.min.js. Preferably at the end of the document. In your untitled document it is before.