Trying to create semi circle progress ring using custom code

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>

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


  position: relative;
  margin: 4px;
  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 */
  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;

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=""></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…

  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) {
        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

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

In your javascript part
Did you add the appropriate tags?

A JS code starts with


/*Your code here*/

and code ends with


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

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