Как кодировать прогресс круг с изображением и текстом внутри?

Question

Я использую индикатор выполнения из этого источника: https://github.com/kottenator/jquery-circle-progress

, он работает, но когда я помещаю изображение и текст сверху, он появляется только сразу после загрузки, но затем он перемещается вПраво круга.Мне нужно, чтобы изображение и текст были всегда посередине - когда страница загружается, выполняется круг prgress и после запуска.Я просто играл с позициями (относительными по родительскому элементу и абсолютными по img и text), но это то же самое.Может быть, у кого-то была такая же проблема?

мой код (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, например заменяет #круг с элементом холста.Лучше быть в безопасности и держать свой HTML отдельно от круга, чтобы он не был случайно удален или изменен каким-либо образом.