使用JavaScript的循环进度条
我在JSFIDLE上试过一个例子，里面有一个带图像的圆形进度条，当我在FIDLE上试的时候，它可以正常工作，但当我在本地系统上做同样的事情时，它就不工作了 我得到这个错误：使用JavaScript的循环进度条,javascript,jquery,html,Javascript,Jquery,Html,我在JSFIDLE上试过一个例子，里面有一个带图像的圆形进度条，当我在FIDLE上试的时候，它可以正常工作，但当我在本地系统上做同样的事情时，它就不工作了 我得到这个错误： progressbar.js:2050 Uncaught Error: Container does not exist: #bar at Circle.Shape (progressbar.js:2050) at new Circle (progressbar.js:1674) at dummy.h
progressbar.js:2050 Uncaught Error: Container does not exist: #bar
at Circle.Shape (progressbar.js:2050)
at new Circle (progressbar.js:1674)
at dummy.html:36
<!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>
svg{
宽度：100%；
显示：块；
}
.包装纸{
位置：相对位置；
宽度：200px；
高度：200px；
}
.wrapper>#条，
.wrapper>img{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.wrapper>img{
边界半径：50%；
}
var circle=新的ProgressBar.circle（“#bar”{
冲程宽度：3，
颜色：“#000”
});
循环。动画（1）；
#bar
svg{
宽度：100%；
显示：块；
}
.包装纸{
位置：相对位置；
宽度：200px；
高度：200px；
}
.wrapper>#条，
.wrapper>img{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.wrapper>img{
边界半径：50%；
}
var circle=新的ProgressBar.circle（“#bar”{
冲程宽度：3，
颜色：“#000”
});
循环。动画（1）；
onload