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

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я использую индикатор выполнения из этого источника: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>

1. Мы, безусловно, сможем вам помочь, если вы предоставите нам свой код.

2. @obscure Я добавил код. может быть, есть идеи?

3. Может помочь обновление вашего вопроса парой снимков экрана, показывающих положение текста / изображения до и после их перемещения.

Ответ №1:

Переместите изображение и текст за пределы круга и оберните все это элементом relative positions:

 <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 отдельно от круга, чтобы он случайно не был удален или изменен каким-либо образом.