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

Judul : Membuat Grafik Bar Responsif dengan CSS
link : Membuat Grafik Bar Responsif dengan CSS

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

Demikianlah Artikel Membuat Grafik Bar Responsif dengan CSS

Sekianlah artikel Membuat Grafik Bar Responsif dengan CSS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Grafik Bar Responsif dengan CSS dengan alamat link http://jendeladuniainternet.blogspot.com/2015/12/membuat-grafik-bar-responsif-dengan-css.html

Tweet