Question

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

它可以工作，但是当我将图像和文本放在顶部时，它仅在加载后立即显示，然后将其移动到圆圈的右边。我需要图片和文本始终在中间-加载页面时，将运行prending圆，然后再运行。我只是简单地玩了一些位置（相对于父元素，而相对于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替换为canvas元素。最好是安全起见，并将您的html与圈子分开，以免被不小心以任何方式删除或更改。

如何使用内部的图片和文字编写进度条代码？

1 个答案: