Membuat Grafik Bar Responsif dengan CSS

Membuat Grafik Bar Responsif dengan CSS - Haloo gengs, apa kabar? semoga baik ya, sebenernya Juragan lagi pengen posting tentang design theory, tapi apa daya kerjaan lagi kampret banget, alhasil cuma posting tutorial nih, tapi insha Allah tutorial membuat grafik bar responsif dengan css ini bermanfaat bagi semua.

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 ya gengs tutorial singkat ini, semoga bermanfaat gengs