如何使用图像和文本编码进度圈？

Question

我正在使用此来源的进度条：https://github.com/kottenator/jquery-circle-progress

它有效，但是当我将图像和文字放在顶部时，它只会在加载后立即显示，但随后会移动到圆圈的右侧。我需要图片和文本始终在中间 - 当页面加载，prgress圆圈运行和运行后。我只是简单地玩位置（相对于父元素和绝对上的img和文本），但它是相同的。也许有人有同样的问题？

我的代码（你可以在上面的链接中找到cdn）：

<div id="circle" style="position:relative"><img src"img/img.png" style="position:absolute"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/dist/circle-progress.js"></script>



<script>

  $('#circle').circleProgress({
    value: 0.75,
    size: 80,
    emptyFill: "#eee",
    fill: {
      gradient: ["red"],
    }
  });
</script>

Answer 1

将图像和文本移动到圆圈外，并使用相对位置元素将其全部包装：

<style>
#loading-wrapper {
  position: relative;
}

.circle-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


</style>

<div id="loading-wrapper">
  <div class="circle-content">
    <img src"img/img.png">
  </div>
  <div id="circle" style="position:relative"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/dist/circle-progress.js"></script>
<script>

    $('#circle').circleProgress({
        value: 0.75,
        size: 80,
        emptyFill: "#eee",
        fill: {
          gradient: ["red"],
        }
    });
</script>

看起来你链接的库做了一些DOM操作，比如用canvas元素替换#circle。最好是安全并保持你的html与圆圈分开，这样它就不会无意中被删除或以任何方式改变。