Membuat Flat Progress Bar CSS HTML Dan Javascript

Contoh Progress bar dengan css, html dan javascipt

Flat progress bar dengan css,html,dan jquery - kali ini episode tutorial dan saya akan membagikan tutorial tentang membuar progress bar dengan css html dan javascript dengan menggunakan gaya flat deisign atau material design, untuk membuat progress bar dengan css ini saya tidak mengguakan jquery tetapi langsung dengan javascript,
baca juga : Membuat Grafik Bar Responsif dengan CSS
langsung saja silahkan teman-teman copy sintaks di bawah ini

html

 <div class="progress-pie-chart" data-percent="78">
  <div class="ppc-progress">
    <div class="ppc-progress-fill"></div>
  </div>
  <div class="ppc-percents">
    <div class="pcc-percents-wrapper">
      <span>%</span>
    </div>
  </div>
</div>
<br />
<center><smal>www.juragancoding.com</smal></center> 

css

 @mixin circle($size) {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - #{$size/2});
  top: calc(50% - #{$size/2});
  width: $size;
  height: $size;
}

$size: 200px;
.progress-pie-chart {
  width: $size;
  height: $size;
  border-radius: 50%;
  background-color: #E5E5E5;
  position: relative;
  &.gt-50 {
    background-color: #81CE97;
  }
}
.ppc-progress {
  @include circle($size);
  clip: rect(0, $size, $size, #{$size/2});
  .ppc-progress-fill {
    @include circle($size);
    clip: rect(0, #{$size/2}, $size, 0);
    background: #81CE97;
    transform: rotate(60deg);
  }
  .gt-50 & {
    clip: rect(0, #{$size/2}, $size, 0);
    .ppc-progress-fill {
      clip: rect(0, $size, $size, #{$size/2});
      background: #E5E5E5;
    }
  }
}
.ppc-percents {
  @include circle(#{$size/1.15});
  background: #fff;
  text-align: center;
  display: table;
  span {
    display: block;
    font-size: 2.6em;
    font-weight: bold;
    color: #81CE97;
  }
}
.pcc-percents-wrapper {
  display: table-cell;
  vertical-align: middle;
}



body {
  font-family: Arial;
  background: #f7f7f7;
}
.progress-pie-chart {
  margin: 50px auto 0;
} 

javascipt

 $(function(){
  var $ppc = $('.progress-pie-chart'),
    percent = parseInt($ppc.data('percent')),
    deg = 360*percent/100;
  if (percent > 50) {
    $ppc.addClass('gt-50');
  }
  $('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
  $('.ppc-percents span').html(percent+'%');
}); 

Nah silahkan di pelajari script nya, semoga bermanfaat dan sampai jumpa