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 https://jendeladuniainternet.blogspot.com/2016/02/membuat-flat-progress-bar-css-html-dan.html
0 Response to "Membuat Flat Progress Bar CSS HTML Dan Javascript"
Posting Komentar