Semantic UI progress bar won't initialize

I've been designing my own website recently but have been stumped on using the Semantic UI progress bar. I have been searching everywhere for different methods and even directly copied the Semantic example and it still won't work. All it shows is a teal progress bar with the same progress everytime. Any ideas why ? Thanks in advance

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test</title>
<link rel ="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" type="text/css">
</head>
<body>
  <div class="ui teal progress" id="example2">
    <div class="bar"></div>
    <div class="label">22% Earned</div>
  </div>
<script>
  $('#example2').progress({
  percent: 22
  });
</script>
</body>
</html>

Solution

I just took your code and included the missing but required libs (jQuery and semantic-ui). Now it works :)

$('#example2').progress({
  percent: 22
  });

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test</title>
<link rel ="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
</head>
<body>
  <div class="ui teal progress" id="example2">
    <div class="bar"></div>
    <div class="label">22% Earned</div>
  </div>
</body>
</html>