Tutorial Membuat Grafik Bar Responsif Menggunakan CSS

Membuat Grafik Bar Responsif dengan CSS

tutorial ini cocok banget buat kamu yang lagi bikin website portofolio, admin panel, atau web app lainnya, langsung aja ke kode HTML-nya yuk !

HTML

<div class="graph-cont">
<h1>Membuat Grafik Bar Responsif dengan CSS</h1>
<div class="bar bar1">50%</div>
<div class="bar bar2">72%</div>
<div class="bar bar3">87%</div>
<div class="bar bar4">30%</div>
</div>

CSS

.graph-cont{
width: calc(100% - 40px);
width: 100%;
max-width: 800px;
margin: 0 auto;
}
h1,h2,h3{
text-align: center;
color: #34495e;
}
.bar{
height: 30px;
max-width: 800px;
margin: 0 auto 10px auto;
line-height: 30px;
font-size: 16px;
color: white;
padding: 0 0 0 10px;
position: relative;
}
.bar::before{
content: '';
width: 100%;
position: absolute;
left: 0;
height: 30px;
top: 0;
z-index: -2;
background: #ecf0f1;
}
.bar::after{
content: '';
background: #2ecc71;
height: 30px;
transition: 0.7s;
display: block;
width: 100%;
-webkit-animation: bar-before 1 1.8s;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.bar1::after{
max-width: 50%;
}
.bar2::after{
max-width: 72%;
}
.bar3::after{
max-width: 87%;
}
.bar4::after{
max-width: 30%;
}
@-webkit-keyframes bar-before{
0%{
width: 0px;
}
100%{
width: 100%;
}
}

.how-cont{
width: calc(100% - 40px);
width: 100%;
max-width: 800px;
margin: 0 auto;
}

Sekian dulu tutorial singkat ini, semoga bermanfaat