You forgot to add $('#progressHTML').progress(); inside a jQuery’s ready event, like this:
$(document).ready(function() {
$('#progressHTML').progress();
});
An example is working in a codepen that i made:
https://codepen.io/mayconmesquita/pen/YzyGvVN
The Code:
<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>
The expected result is that when the page loads, the progress bar loads like this: https://i.imgur.com/VztbDdC.png
However the result I get is a progress bar with no progress, like this: https://i.imgur.com/iO93CrO.png
The link for jQuery and semantic/fomantic UI libararies is listed below:
<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>
The actual area in the website that has the progress bar is below:
<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>
Any help would be appreciated. 🙂
Thank you so much, I know pretty much nothing about jQuery aha.
For future readers, the SUI / FUI libs use jquery with some JavaScript to apply behaviours such as the progress bar. The format used here is $().progress(). That first part with the jquery selector is like a plain JS selector in that it can only ‘find’ the target element if the page DOM is ‘ready’. So the convention is to use jquery’s hard-wired document.ready callback as per the answer. Document.ready is called when the DOM is ready to be searched with selectors. It is a very common issue-pattern for newcomers to DOM manipulation to overlook this point.
