CSS

Membuat Progress Bar Sederhana Menggunakan CSS

Inpows

30/04/2020 No Comments

Membuat Progress Bar Sederhana Menggunakan CSS – Pada tutorial kali ini, kamu akan mempelajari cara membuat progress bar sederhana menggunakan CSS. Progress bar adalah sesuatu yang muncul saat sedang melakukan kegiatan pemindahanan suatu data. Simak file CSS dan HTML berikut untuk membuat progress bar sederhana menggunakan css.

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(125deg, #40a8ee 50%, #199cf3 50%);
}

.container{
  position: relative;
  background: #fff;
  border-radius: 30px;
  width: 700px;
  height: 100px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.container .title-text{
  letter-spacing: 1px;
  font-size: 18px;
  color: #000;
}

.container .progress{
  display: flex;
  width: 100%;
  margin-top: 20px;
}

.progress .progress-bar{
  position: absolute;
  left: 150px;
  width: 60%;
  height: 15px;
  border-radius: 30px;
  background: rgb(226, 226, 226);
}

.progress-bar div{
  width: 51%;
  height: 100%;
  background: rgb(255, 0, 85);
  border-radius: 30px;
}

.progress p {
  position: absolute;
  right: 40px;
  margin-top: -12px;
  font-size: 24px;
}

.progress h6 {
  margin-top: -6px;
  font-size: 18px;
  letter-spacing: 1px;
}

.progress-bar span{
  position: absolute;
  transform: translateY(-20px) translateX(-10px);
  left: 0;
  width: 25px;
  height: 25px;
  background: #fff;
  border: 6px solid rgb(255, 0, 85);
  border-radius: 50%;
}

HTML

<html>
<head>
  
</head>
<body>
  <div class="container">
    <div class="title-text">
      Contoh Progress Bar
    </div>
    <div class="progress progress0">
      <h6>Task 1</h6>
      <div class="progress-bar">
        <div class="progressing"></div>
        <span class="margin"></span>
      </div>
      <p class="percent-num">
      0%
      </p>
    </div>
  </div>
</body>
</html>

Hasil

Kamu dapat melihat hasilnya menggunakan jsfiddle dibawah.

Nantukan dan Baca tutorial mengenai CSS lainnya hanya di inpows.

Share :