如何用图像和文字编码进度圆圈

Question

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

它有效，但是当我将图像和文本放在顶部时，它仅在加载后立即出现，但是随后将其移至圆圈的右侧。我需要图片和文本始终处于中间 - 当页面加载时，Prgress Circle运行并在运行后。我只是只是使用位置（亲戚在父元素上，而在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操作，例如用画布元素代替#circle。最好是安全并保持HTML与圆圈分开，以免以任何方式无意中删除或更改。