Индикатор выполнения не заполняется тегом сценария выполнения. - PullRequest
Новая
       35

Индикатор выполнения не заполняется тегом сценария выполнения.

2 голосов
/ 20 апреля 2020

Ожидаемый результат заключается в том, что при загрузке страницы индикатор выполнения загружается следующим образом: https://i.imgur.com/VztbDdC.png

Однако в результате я получаю индикатор выполнения без прогресса, как этот : https://i.imgur.com/iO93CrO.png

Ссылка для jQuery и семантических / fomanti c библиотек пользовательского интерфейса указана ниже: 

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
    <script
        src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"></script>
    <script src="semantic/dist/semantic.min.js"></script>
    <script>
        $('#progressHTML').progress();
    </script>

Фактическая область на веб-сайте у которого есть индикатор выполнения ниже: 

<div id="skills" class="skills-containter">
        <div class="skills-text-containter">
            <h1 class="ui header skills-header">Skills</h1>
            <div class="ui blue progress" data-percent="74" id="progressHTML">
                <div class="bar"></div>
                <div class="label">HTML</div>
              </div>
            <p class="ui paragraph skills-paragraph">no</p>
        </div>
    </div>

Любая помощь будет оценена. :)

1 Ответ

2 голосов
/ 20 апреля 2020

Вы забыли добавить $('#progressHTML').progress(); в событие готовности jQuery, например: 

$(document).ready(function() {
  $('#progressHTML').progress();
});

Пример работы в коде, который я сделал:

https://codepen.io/mayconmesquita/pen/YzyGvVN

codepen example

Код : 

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<script
        src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<script>
  $( document ).ready(function() {
    $('#progressHTML').progress();
  });
</script>

<div id="skills" class="skills-containter">
  <div class="skills-text-containter">
    <h1 class="ui header skills-header">Skills</h1>
    <div class="ui blue progress" data-percent="74" id="progressHTML">
      <div class="bar"></div>
      <div class="label">HTML</div>
    </div>
    <p class="ui paragraph skills-paragraph">no</p>
  </div>
</div>
...