parish parish - 3 months ago 52
Javascript Question

How can I create semicircle progress bar with jQuery

I want a half circle like that's shown in my fiddle. And the progress bar needs to have green color.

I am new to Jquery.

HTML:

<div>
<p>100%</p>
</div>


CSS:

div {
height: 45px;
width: 90px;
border-radius: 90px 90px 0 0;
-moz-border-radius: 90px 90px 0 0;
-webkit-border-radius: 90px 90px 0 0;
border: 5px solid red;
border-bottom: none;
}

p {
text-align: center;
padding: 20px 0;
}


Fiddle

Answer

$(".progress").each(function(){
  
  var $bar = $(this).find(".bar");
  var degrees = parseInt( $(this).text(), 10) * 1.8; // 100% = 180 degrees rotation
  
  $({deg:0}).animate({deg: degrees}, {
    duration: 3000,
    easing: "swing",
    step: function(d) {
      $bar.css({
        transform: "rotate("+ d +"deg)",
        color: "hsl("+ (d*0.7) +", 50%, 60%)"
      });
    }
  });
});
.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: 90px;
  height: 45px;
}
.bar{
  position:absolute;
  top:45px;
  width: inherit;
  height: inherit;
  border-radius: 0 0 45px 45px;
  box-sizing: border-box;
  border: 5px solid currentColor; /* Use currentColor... */
  color:green; /* ...to ease the control over colors in jQuery */
  border-top:0;
  /* since we're rotating a half circle we need to translate to transform origin */
  transform-origin: 50% top;
  -webkit-transform-origin: 50% top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="progress">
  <div class="barOverflow">
    <div class="bar"></div>
  </div>
  10%
</div>

<div class="progress">
  <div class="barOverflow">
    <div class="bar"></div>
  </div>
  100%
</div>

<div class="progress">
  <div class="barOverflow">
    <div class="bar"></div>
  </div>
  34%
</div>

<div class="progress">
  <div class="barOverflow">
    <div class="bar"></div>
  </div>
  67%
</div>

P.S: You don't need JS (unless you need to precisely control the progress steps)