Create Semi Circle Progress Bar using CSS

A progress bar is used to indicate the status of a process visually. In web designing, there are various types of progress bar including circular/radial progress bars and animated progress bars. In this tutorial, we are going to create semi circle progress bar using CSS and a little jQuery.

As you have seen in the above image, these progress bars are quite similar to circular bars but comes with half circle. Such type of progress bar can be used to indicate speed or meter related values. However, it can also be used for a general-purpose progression status.

Before starting with coding, I would like to highlight some features of these semi-circle progress bars. You may have noticed on the demo page, each value of the progress bar is animating. Similarly, the filled area of progress bar increasing smoothing on page load.

HTML Structure for Semi Circle Progress Bar

The HTML for a semi circle progress bar is really simple that consists of four elements. Likewise, CSS  styles consist of only three selectors. So, in order to create a half-circle progress bar, create a div element with class name “progress”. Similarly, create two other div elements inside it with class name “barOverflow” and “bar” respectively. Add your progress value inside the span tag.

So, the complete HTML structure for four semi-circle progress bars with different values is as follows:

        <div class="progress">
          <div class="barOverflow">
            <div class="bar"></div>
          </div>
          <span>10</span>%
        </div>
        <div class="progress">
          <div class="barOverflow">
            <div class="bar"></div>
          </div>
          <span>100</span>%
        </div>
        <div class="progress">
          <div class="barOverflow">
            <div class="bar"></div>
          </div>
          <span>34</span>%
        </div>
        <div class="progress">
          <div class="barOverflow">
            <div class="bar"></div>
          </div>
          <span>56.5</span>%
        </div>
          </div>

If you want to add other HTML elements inside a semi-circle, you can add without any issue. Similarly, you can add both float and integer values inside the span tag according to your needs.

The CSS Styles

OK! now let’s style the semi circle progress bar with CSS. To do so, define some styles for parent selector (progress). Keep its position relative and float it to left. Likewise, align its text to the center and define CSS margin property for it.

.progress{
  position: relative;
  margin: 4px;
  float:left;
  text-align: center;
}

Now, define the size of the circle using CSS width and height property for the “.barOverflow” selector. Keep its overflow hidden in order to make it half.

.barOverflow{ /* Wraps the rotating .bar */
  position: relative;
  width: 180px; height: 90px; /* Half circle (overflow) */
  margin-bottom: -14px; /* bring the numbers up */
  overflow: hidden;
}

After that, define some styles for the “.bar” selector and keep its position absolute.  Make it rounded using border-radius property and define its border that will indicate the unfilled area of the progress bar. Similarly, the border-bottom-color and border-right-color property specify a filled area of the progress bar.

.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;
}

The JavaScript

Now, almost everything related to styling the semi-circle is done. Its time to functionalize the progress bar using JavaScript. We’ll use the jQuery JavaScript library to animate numbers and circle bar. So, load the jQuery by adding the following CDN link to your project.

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

Finally, add the following document ready function to animate the semi-circle progress bar.

$(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);
    }
  });
}); 
});

If you want to customize the speed of the animation, you can define the custom value for the duration variable that is 3000.

That’s all! If you have any questions or suggestions related to these semi-circle progress bars, feel free to comment below.

You May Also Like

Leave a Comment