javascript - 如何用里面的图像和文字编码进度圈？

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 与圆圈分开，这样它就不会无意中被删除或以任何方式更改。