Membuat Flat Progress Bar CSS HTML Dan Javascript - Hallo sahabat Jendela Dunia Internet Dan Tekhnologi, Pada Artikel yang anda baca kali ini dengan judul Membuat Flat Progress Bar CSS HTML Dan Javascript, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel tips and trik, Artikel Web Design, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Flat Progress Bar CSS HTML Dan Javascript
link : Membuat Flat Progress Bar CSS HTML Dan Javascript

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

Demikianlah Artikel Membuat Flat Progress Bar CSS HTML Dan Javascript

Sekianlah artikel Membuat Flat Progress Bar CSS HTML Dan Javascript kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Flat Progress Bar CSS HTML Dan Javascript dengan alamat link http://jendeladuniainternet.blogspot.com/2016/02/membuat-flat-progress-bar-css-html-dan.html

Tweet