Trying to create semi circle progress ring using custom code

Custom Coding
,
1

Not sure where I’m messing up on trying to add this progress ring - but I’m new to this, so I may be doing something that isn’t possible (or just plain doing it wrong). So far, I have added this HTML in custom code block in a page:

<div class="progress">
    <div class="barOverflow">
        <div class="bar"></div>
         </div>
    <span>36</span>%
    </div>

I’ve also added this CSS styling to the page header in a custom code block:

<style>

.progress{
  position: relative;
  margin: 4px;
  float:left;
  text-align: center;
}
.barOverflow{ /* Wraps the rotating .bar */
  position: relative;
  overflow: hidden; /* Comment this line to understand the trick */
  width: 180px; height: 90px; /* Half circle (overflow) */
  margin-bottom: -14px; /* bring the numbers up */
}
.bar{
  position: absolute;
  top: 0; left: 0;
  width: 180px; height: 180px; /* full circle! */
  border-radius: 50%;
  box-sizing: border-box;
  border: 10px solid #ccc;     /* half gray, */
  border-bottom-color: #0bf;  /* half azure */
  border-right-color: #0bf;
}
</style>

All of that seems to be okay. I’m guessing the javascript stuff is where things are going wrong…

I have this code in the page header custom code block along with the CSS style:

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

That is calling up jQuery JavaScript library - don’t really know what that means, but that’s what it does.

I think this is the part that I’m missing the boat - adding the following document ready function. Don’t know where this goes, or what it does…

$(document).ready(function(){
$(".progress").each(function(){
  var $bar = $(this).find(".bar");
  var $val = $(this).find("span");
  var perc = parseInt( $val.text(), 10);
 
  $({p:0}).animate({p:perc}, {
    duration: 3000,
    easing: "swing",
    step: function(p) {
      $bar.css({
        transform: "rotate("+ (45+(p*1.8)) +"deg)", // 100%=180° so: ° = % * 1.8
        // 45 is to add the needed rotation to have the green borders at the bottom
      });
      $val.text(p|0);
    }
  });
}); 
});

Anyone have mercy on someone who is a willing learner to provide a bit of direction?

2

In your javascript part
Did you add the appropriate tags?

A JS code starts with

<script> 

/*Your code here*/

and code ends with

</script>

PS: Javascript = better inside the footer than inside the header

3

@matthieu_chateau Thanks for the tip that JS works better inside the footer - that seemed to fix things!